/* The body and #main settings are establsihed to make a PC browser look a bit like a phone.
  The media query at the end of the file then removes these settings for actual phones.
*/
body, html {
  height: 100%;
  line-height: 1.8;
  background-color:silver;
}

.w3-bar .w3-button {
  padding: 10px;
}
#features .w3-button
{
    color:blue;
}
#features .w3-button:hover
{
    text-decoration:underline;
}
h2
{
    text-align:center;
}

#Header1, #myNavbar, #features, #members, #pricing, #contact, #start, #promo
{
    max-width:1200px;
    margin-left: auto;
    margin-right: auto;
}
/*
Logo Font styling
*/
.topLogo {
    max-width:50%;
}
.w3-display-topright {
    text-align:right;
}

#start .w3-select {
    width: inherit;
    max-width: 100%;
}

#start form label
{
    color:#9c27b0;
    font-weight:bold;
}
#start hr
{
    border-top:1px solid #9c27b0;
}
#start .inputOther
{
   display:inline;
   width:15em;
   padding-top: 0;
   padding-bottom: 0;
   font-size: 0.9em;
   margin-top: 0.2em;
}

.promo {
	font-size:0.9em;
	color: Gray;
	text-align: center;
    background-color:#eee;
    border-top:1px darkgray solid;
}
.promo p
{
padding:0;
margin:0
}

.feature
{
/*   margin-bottom:1em;*/
    padding:0.5em;
}

.feature b
{
    font-size:1.3em;
    color:#222;
}

.feature i
{
    font-size:2em;
    color:#9c27b0;
    /*color:#222;*/
    padding-right:1em;
}
.feature a i
{
    font-size:inherit;
    color:blue;
    padding:0 0.25em;
}

.feature a
{
    color:blue;
    text-decoration:none;
    margin-left:2em;
    font-size:0.9em;
    padding:0 0.25em;
}
.feature button
{
    background-color:#e7f4f8;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    margin-left: 2em;
    border-radius: 0.5em;
}

#Header1 {position: relative; top:0; left:0; }
#logoMarquee { position: absolute; z-index:0; bottom: 3em; overflow:hidden; width:100%; margin-left:auto; margin-right:auto;}

#mbrLogos {
    display: flex;
    flex-wrap: nowrap;
    animation: scrollLogos 60s infinite;
    animation-timing-function: linear;
    animation-delay: 4s;
    animation-direction: alternate;
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2500px); }
}

.logoWrap {display:inline-block; width:120px; background-color:white; color:black; text-align:center; line-height:1.2; margin-right:1em; margin-left:1em;flex-shrink:0;}
.logoWrap img {width:100%;}
.w3-top{ z-index:2; }
.w3-display-left { z-index:1; }

.memberList {
    display: grid;
    grid-template-columns: auto auto auto;
    gap:1em;
}

#hdrText {
    display:inline-block;
    padding: 1em;
    text-align: center;
    background-color: #aaaaaaaa;
    margin-left:auto;
    margin-right:auto;
}

#hdrText span {
    text-shadow: 2px 2px 2px black;
}
.memberList {list-style-type:none; padding:0;}
.memberList li { border-bottom:1px solid silver;}
.memberList img { width: 60px;padding-bottom:0.5em;}
.memberList a { display: inline-block; }
.memberList li { text-align: center; }
.logonForm {padding:1em;}
#logon div {max-width:30em;}

@media (max-width: 599px) {
    #logoMarquee {bottom:1em;}
    .logoWrap img {width:80px;}
    .memberList img {
        width: 60px;
        padding-bottom: 0.5em;
    }

}