h2 {
    margin-bottom: 1em;
    padding: 0 5%;

    font-size: 2.5em;
    text-align: center;
    text-transform: lowercase;
}

h4 {
    padding: 0 5%;
    font-size: 1.4em;
    text-align: left;
    text-transform: lowercase;
    max-width: 550px;
    margin: 2em auto;
}

#faq-content {
    overflow: hidden;
}
    #faq-content a {
        display: block;
        margin-bottom: .35em;
    }

/* primarily for header */
.container {
    max-width: 100%;
}

#faq-content,
#faq,
#racelist,
.longtext,
#team,
#content .container {
    max-width: 550px;

    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
}

.longtext,
#team {
    max-width: 800px;
}

h3 {
    margin-bottom: .35em;
}

[id^=Q] {
    margin-bottom: 2em;
}

p {
    margin-top: 0;

    font-size: 1.1em;
}
    :target {
        background: #eee;
        padding: .1em 1em;
        margin: 0 -1em;
    }

#content :not(#faq-content) a:hover {
    border-color: #177fa5;
}


.person p {
    text-align: left;
}



#racelist .race {
    display: block;

    margin-bottom: 1em;
    padding: .2em .75em .2em .2em;
    overflow: hidden;

    color: #000;
    font-weight: 300;
}
    #racelist .race:hover {
        background: rgba(49, 158, 179, 0.14);
        text-decoration: none;
    }

        #racelist .race p {
            text-align: left;
        }

    #racelist img {
        margin: 0 auto;
        max-width: 175px;
        display: block;
        width: 80%;
        border-radius: 100%;
    }

    #racelist h3 {
        margin-top: .5em;
        text-align: center;
    }
        #racelist .race span {
            display: none;
        }


@media (min-width: 480px) {
    #racelist .race span {
        display: inline;
    }
}

@media (min-width: 800px) {
    .person {
        overflow: hidden;
    }
        .person img {
            float: left;
            margin: 3em 0 0;

            max-width: 175px;
        }
        .person.right img {
            float: right;
        }

        .person .name {
            margin-top: 0;

            text-align: left;
        }
        .person p {
            font-size: 1.05em;
        }

        .person .name,
        .person .description {
            margin-left: 195px;
        }

        .person.right .name {
            text-align: right;
        }

        .person.right .name,
        .person.right .description {
            margin-left: 0;
            margin-right: 195px;
        }

    #racelist .race p {
        margin-left:195px;
    }

    #racelist img {
        float: left;
        margin-right: .75em;
        margin: 1em 0 0;
    }

    #racelist h3 {
        margin-top: .35em;
        margin-left: 195px;
        text-align: left;
    }
}



.testimonials {
    padding: .75em 5%;
    background: #319eb3;
    color: #fff;

    font-size: 2.5em;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}
        
            
#header {
    position: fixed;
    width: 100%;
    top: 0;
}       

#content {
    margin-top: 59px;
}       
     
#create-your-virtual-race-button {
    text-decoration: none;
    color: white;
}  

#footer {
    margin-top: 0;
}

/*
@media (max-width: 640px) {
   #header > .container > h1 {
        width: 18px;
        height: 45px;
        overflow: hidden;
   }
   #cssmenu {
        padding-left: 0;
   } 
   #cssmenu > ul > li > a {
       font-size: 10px;
       padding: 12px 12px;
   }
   #social {
       display: none;
   }
    
   #testimonials > .container img {
       max-width: 100% !important;
   }
   #testimonials > .container > div > div {
       width: 100% !important;
   }
   .nomargin-mobile {
       margin: 0 !important;
   }
   .hide-mobile {
       display: none;
   } */

   /* This can display on flatpages for users to sign in.
   #login_logout {
       display: none;
   } */

   #login_logout {
    position: absolute !important;
    top: 0px !important;
    right: 2rem !important;
    padding: 0px !important;
    height: auto !important;
   }

   #header #social {
    position: absolute !important;
    top: 0rem !important;
    right: 5.5rem !important;
   }

   #cssmenu li ul a {
       font-size: 11px !important;
   }


@media(max-width:1100px){
  #header #social {
     display: none !important;  
  }
  #cssmenu .hamburger {
   right: 5.5rem !important;
  }
}