html {
    font-size: 16px;;
    font-family: 'Roboto', sans-serif;
}

main, footer, nav {
    max-width: 60rem;
    margin: auto;
    display: block;
}

/* Responsive navigation */

header {
    max-width: 60rem;
    margin: auto;
}

#logo { float: left; }
#logo h1 {display: inline;}

header > nav {
    max-width: 60rem;
    margin: auto;
}

#sitenav button { float: right;}

#sitenav ul { display: none; }

/* Make sure all inputs have 100% text size too */
button, input[type="text"], select { font-size: 100%; }

/* Have line spacing for paragraphs */
p {
   line-height: 1.5; 
}

/* Headings */
h2 {
    background-color: #666;
    color: #fff;
    padding: 0.2em;
}
/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

table, th, td {
    border: solid 1px #666;
}

thead td { text-align: left; color: #fff; background-color: #000; }

th { text-align: left; }
td { text-align: center; }
th, td { padding: 0.5em; }
thead th:nth-child(1) {
  width: 40%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 20%;
}

thead th:nth-child(4) {
  width: 20%;
}


/* Testimonials */
/* ============ */

div.testimonial {
    border: solid 0px red; 
}

div.testimonial > img {
    float: left;
    border: solid 5px #666;
}

div.testimonial > p {
    border: solid 0px green;
}

/* Collapsibles */
/* ============ */
section.collapsible h3 {
    margin: 0;
}

section.collapsible button.collapsible {
    padding: 0.3em;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-top: 1px solid #333;
    border-bottom: none;
    border-left: none;
    border-right: none;
    background-color: #fff;
}

section.collapsible:last-child button.collapsible {
    border-bottom: 1px solid #333;    
}

section.collapsible button.collapsible:focus, section.collapsible button.collapsible:hover {
  /*   color: #fff;
    background-color: #000;
    text-decoration: underline; */
}

/* Expanded styles */
section.collapsible button.collapsible[aria-expanded="true"] {
    
}

section.collapsible button.collapsible i {
    float: right;
}


/* Tabs */
/* ==== */
.tablist {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    width: 100%;
    border-bottom: 0px solid black;
}



.tablist li {
    list-style-type: none;
    display: block;
    flex: 0 1 100%;  
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

.tablist li {
    border-right: solid 1px black;
}
/* First list item has both left and right borders, rest have just right. */
.tablist li:first-child {
    border-left: solid 1px black;
    border-right: solid 1px black;
}

/* Non-selected (default) tab */
.tablist li a {
    
    margin-left: 0px;
    padding: 0.4em;
    background: #DDE;
    text-decoration: none;
    display: block;

    text-align: center;
}

/* Selected tab */
.tablist a.tab-selected {
    background: white;
    
    font-weight: bold;
}

/* Selected tab with the focus */
.tablist a.tab-selected:focus {
    color: white;
    background-color: black;
}

/* Tab panel */
.tabpanel {
    padding: 0.5em;
    border-left: solid 1px #778;
    border-right: solid 1px #778;
    border-bottom: solid 1px #778;
}

/* Tab panel with the focus */
.tabpanel:focus {
    outline: solid 2px red;
}

.tabpanel img {
    
    width: 100%;
    height: auto;
    max-width: 200px;
    
}

/* Quote styles */
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
    float: left;
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

cite {
    display: block;
    margin: 2em;
}





/* Form styles */
.input-group { margin-top: .5em; margin-bottom: .7em;}
.input-label { }

input[type="text"] { width: 20em; padding: 0.3em;}
select { padding: 0.3em; }

.input-group p { margin: 0; }

p.error {color: red;}

/* Utility classes */

.do {background-color: yellow; border: solid 1px red; padding: 0.2em;}
img {display: block; margin-left: auto; margin-right: auto;}

.group:after {  content: "";  display: table;  clear: both;}
.rlink {color: blue; text-decoration: underline; cursor: pointer;}

.red {color: red;}
.green { color: green;}
.center {text-align: center;}
.instruction { color: #888;}

#saleschart {
    
    width: 100%;
    height: auto;
    max-width: 767px;
}

div.h3heading {
        font-size: 1.17em;
    font-weight: bold;
}
    
div.terms p {line-height: 1; font-size: 0.8em; color: #888; margin: 0px;}

#emailtiphelp { padding: 0.5em; border: solid 2px #333; background-color: burlywood; }
.coloredlink {text-decoration: none; color: #4632C9 !important;}