* {
    padding: 0;
    box-sizing: border-box;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
}

a {
    text-decoration: none;
    transition: all .5s ease;
}

html {
    font-size: 16px;
}

body {
    margin:0;
    padding: 0;
}

#menu_links > li {
    display: list-item;
    text-align: -webkit-match-parent;
    margin-bottom: unset;
    list-style: none;
}

#menu_links > li:before {
    list-style: none;
    content: none;
}

.nav_bar {
    position:fixed;
    width:100vw;
    top:0;
    z-index: 10;
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align:center;
    
    background-color: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255, 0.25);
    transition: background-color 0.66s, border-bottom 0.5s;
}

.nav_bar.nav_bar_active {
    background-color: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.0);
}

nav_bar_button {
    display:block;
    margin: 0 1.5rem;
    padding 16px;
    cursor:pointer;
    background-image: url(../images/icon_menu_white.svg);
    background-size: cover;
    height:2rem;
    width:2rem;
    display:none;
}

#menu_toggle {
    display: none;
}

.label_toggle {
    display: none;
    cursor: pointer;
    height:1.5rem;
    width:1.5rem;
    margin: 0 1.5rem;
    padding 1rem;
    background-image: url(../images/icon_menu_white.svg);
    background-size: cover;
}

.nav_bar_logo {
    margin: 1rem 0;
}
      
.section_announcement{
    width: 100vw;
    background-color: #000;
    padding: 1.5rem 10%;
    text-align: center;
    font-size: 1.125rem;
    color: #fff;
    font-weight: 100;
    line-height: 1.75em;
}

.section_announcement > p > a {
    color: var(--findaspot_red);
}

.section_announcement > p > a:visited {
    color: var(--findaspot_red);
}

.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    padding: 3em 0;
    background-color: var(--findaspot_light_gray);
    font-size: 0.8em;
    color: var(--findaspot_mid_gray);
    line-height: 1.66rem;
}

.footer_section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
      
#footer_section_1 {
    margin: 0 0 1.5rem;
    width: 360px;
}
      
#footer_section_2 {
    
}
      
#footer_section_3 {

}
      
.footer_section_title {
    font-weight: 600;
}
      
.footer_section_link {
    list-style-type: none;
    margin-bottom: 0.5rem;
}
      
.footer_section_link > a {
    text-decoration: none;
    color: inherit;
}

.footer_section_link:before {
    content: none;
}
      
#footer_caption {
    margin: 0 0 1.5rem;
}

#footer_social_icons {
    display: flex;
    flex-direction: row;
    margin: 0 0 1.5rem;
}
      
.footer_social_icon {
    margin-right: 3rem;
    width:2rem;
    height:2rem;
}

.social_svg_logo {
    fill: #fff;
    width: 100%;
}
    
.footer_social_icon > a {
    text-decoration: none;
}
      
.footer_social_icon:last-of-type {
    margin-right: 0px;
}

.footer_list {
    display:flex;
    justify-content: center;
    margin-left: 0;
}

.hidden {
    display: none;
}

.footer_item {
    list-style-type: none;
    margin: 0 16px;
}

.footer_link {
    color: #fff;
    opacity: 0.66;
    transition: opacity 0.66s;
}

.footer_link:hover {
    opacity: 1.0;
    transition: opacity 0.66s;
}

.footer-legal {
    text-align: center;
    opacity: 0.33;
}

.main_pic::after{
    content: "";
    position:absolute;
    top:0px;
    right:0px;
    height:418px;
    left:0px;
    background-size: cover;
    background-position: center 33%;
    z-index: -1;
    opacity: 1.0;
}
      
.no_header_image {
    height:4rem;
    background-color: #000;
}
      
#header_image_home::after {
    background-image: url(../images/header/tim-foster-665923-unsplash.jpg);
}
      
#header_image_developer::after {
    background-image: url(../images/header/devin-avery-517271-unsplash.jpg);
}

.main_pic {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width:100vw;
    height:418px;
    background-color: rgba(0,0,0,0.66);
    color: #fff;
}

.main_pic-caption{
    font-size: 0.6em;
    opacity: 0.66;
    text-align: right;
    z-index:-1;
    margin: 8px;
}

#logline {
    font-size:1.875em;
    -webkit-font-smoothing: antialiased;
    font-weight:500;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 2px 20px rgba(0,0,0,.4);
    margin: 0 auto 1.5rem;
}
      
#header_button {
    margin: 0 auto 2.5rem;
}
      
.button_rounded {
    font-size: 1rem;
    background-color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 2rem;
    text-transform: uppercase;
    border: solid 1px var(--findaspot_light_gray);
    color: var(--findaspot_dark_gray);
}
      
.button_rounded:hover {
    cursor: pointer;
    opacity: 0.95;
}

.intro-caption {
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width:480px;
    margin: 48vh auto 0;
    font-size: 1.6em;
    letter-spacing: 1.2;
    font-weight: 100;
    display:none;
    display: inherit;
    text-align: center;
    line-height: 1.6;
}

.intro-store_links {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width:480px;
    margin: 0 auto 0;
    display: inherit;
}

#ios_button {
    
}

#android_button {
    display: none;
}

.intro-store_links>a {
    width:100%;
    margin: 0 16px;
}

.store_link-image {
    width: 11rem;
    margin: 0 24px;
}


#logo {
    margin-left: 24px;
    width:8.25rem;
}
      
#footer_logo {
    margin: 0;
    width: 8.25rem;
}
      
.content {
    display: flex;
    flex-direction: column;
}
      
.content_title {
    margin: 4rem auto;
    font-size: 1.875rem;
    color: #000;
    text-align: center;
}
      
#faq_items {
    margin: 0 auto;
    width: 84vw;
    max-width: 64rem;
}
      
.faq_item {
    line-height: 1.25rem;
    margin: 0 0 2.5rem;
}
      
.faq_question {
    font-size:1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
      
.faq_answer {
    font-size: 1rem;
    font-weight: 100;
}
      
.faq_answer > p > b {
    color: var(--findaspot_mid_gray);
}

.content-row {
    display: flex;
    width: 100vw;
    min-height: 10vh;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: bottom;
    margin: 5rem auto 0;
}

.gray_row {
/*    background-color: var(--findaspot_white_gray);*/
    background-color: #F8FAFA;
}

#section_team {
    width: 100%;
    max-width: 900px;
    margin-top: 0px;
}

#team_cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.team_card {
    width:22.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    margin: 0 2rem 4rem;
}

.team_card_row_1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0.75rem 0;
}

.team_card_profile_image {
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 1rem;
}

.team_card_profile_image > img {
    width: 100%;
    border-radius: 50%;
}

.team_card_user_info {
    display: flex;
    flex-direction: column;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.team_title {
    font-weight: 100;
    color: #aaaaaa;
    margin-top: 0.125rem;
}

.team_card_row_2 {
    width: 100%;
    height:15rem;
    background-size: cover;
    background-position: center center;
}

.team_card_row_3{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    width: 100%;
    padding: 1rem;
    font-size:0.75rem;
    color: #aaaaaa;
    line-height: 2em;
}

.team_card_pin {
    height: 1.25em;
    margin-right: 0.5em;
    align-self: center
}

hr {
    color: #cccccc;
    border-style: solid;
    border-width: 0.5px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
      
#section_additional_support {
    flex-direction: column;
    margin-bottom: 4rem;
}
      
#additional_support_options {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    
}
      
.additional_support_option {
    text-align: center;
    width: 22.5rem;
    padding: 2.5rem;
    background-color: var(--findaspot_white_gray);
}
      
.support_option_title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
      
.support_option_caption {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 100;
    margin-bottom: 1.5rem;
}
      
#developer_stats_footnote {
    text-align: center;
    line-height: 1.75rem;
    font-size: 0.725rem;
    font-style: italic;
    padding: 0 16vw;
    margin: 5vh auto;
    color: var(--findaspot_light_gray);
}
      
#section_developer_stats {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 5rem 0 0;
}
      
.developer_stat {
    width: 15vw;
    max-width: 15.265rem;
    text-align: center;
}
      
.developer_stat > img {
    width:90%;
    margin: 0 auto 1rem;
}
      
.developer_stat_caption {
    line-height: 1.375em;
}

#section_app {
    flex-direction: column;
    margin: 7rem auto 0;
}

#section_features {
/*    justify-content: space-between;*/
    flex-wrap: wrap;
    margin: 4rem auto 0;
}

.app_feature {
    align-self: flex-start;
    width: 26vw;
    max-width: 18.75rem;
    text-align: center;
    margin: 0 2vw 3rem;
}

.app_feature_image {
    width: 90%;
    margin: 0 auto;
}

.app_feature_title {
    font-size: 1.875rem;
    font-weight: 300;
    margin: 1.5rem 0 0.5rem;
}

.app_feature_caption {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.66rem;
}

#app_text {
    margin: 0 auto;
    text-align: center;
    max-width: 720px;
    width: 50vw;
    font-weight: 300;
}

#app_title {
    font-size:1.875em;
    margin: 0 0 16px;
}

#app_caption {
    font-size:1.25rem;
    line-height: 1.66em;
    font-weight: 300;
}

#phone_graphic {
    margin: 0 auto;
}

#content-row-1 {
}

#content-row-2 {    
}

#content-row-3 {
    
}

#content-row-4 {
    
}

.content-row-title {
    margin: 0 4vw;
    text-align: center;
    font-size: 1.5em;
    font-weight:300;
    opacity: 0.8;
    line-height: 1.4;
    letter-spacing: 1.4;
    max-width: 1080px;
}

.content-row-split{
    width: 100%;
/*    max-width: 1080px;*/
    min-height: 420px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    justify-content: flex-start;
    margin: 0 auto;
    font-size: 1.125rem;
    font-weight: 100;
    line-height: 2.0em;
    color: #444;
}

.row_reverse {
    flex-direction: row-reverse;
}

.content-row-split-title {
    font-size: 1.625rem;
    font-weight: 300;
    line-height: 1.4;
    color: rgba(0, 0, 0, 1.0);
    margin: 0 0 16px;
}

.content-row-split_small-image {

}

.content-row-split-image {
    height:240px;
}

.content-row-split_small {
    width: 40%;
    min-width: 480px;
    align-self: stretch;
    background-repeat: no-repeat;
    background-size: cover;
}

#row_image_1 {
    background-image: url(../images/row/route.png);
    background-position: right;
}

#row_image_2 {
    background-image: url(../images/row/findaspot_results.jpg);
    background-position: left;
}
      
.background_left {
    background-position:left;
}
      
.background_right {
    background-position:right;
}

#row_image_3 {
    background-image: url(../images/row/security.jpg);
    background-position: right;
}

.content-row-split_large {
    width: 60%;
    display: flex;
}
      
.content_row_splite_large_left {
    justify-content: flex-end;
}

.content_row_splite_large_right {
    justify-content: flex-start;
}

.row_text {
    min-width: 18.75rem;
    max-width: 27rem;
    margin: 0 13vw;
    text-align: left;
}

.row_text_left {
    align-self: flex-end;
}

.row_text_right {
    align-self: flex-start;
}

#menu_links {
    color:#fff;
    list-style-type: none;display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0 2rem 0 0 ;
    font-size: 1rem;
}

#menu_links > li {
    display: inline-block;
    margin-left: 3rem;
}

#menu_links > li:first-child {
    margin-left: unset;
}

#menu_links > li > a {
    color: #fff;
}

#menu_links > li > a:visited {
    color: #fff;
}

#menu_links > a {
    margin: 0 20px;
    color: #fff;
}


/* CSS VARIABLES*/

:root {
  --findaspot_red: #FF3B21;
  --findaspot_dark_gray: #242426;
  --findaspot_mid_gray: #525059;
  --findaspot_light_gray: #BBBEBF;
  --findaspot_white_gray: #FAFCFC;
}