@import url('//fonts.googleapis.com/css?family=Open+Sans:400,700');

#map {
    height: 200px;
    width: 100%;
    background-color: #333;
}

* {
    padding:0;
    margin:0;
}

*:link:hover {
 text-decoration: underline;
}

html {
  /*  background-color: #eaf0f2; */
  background-color:#fafafa;
}

body {
    min-width:600px; /* until this whole thing goes mobile */
    font:14px/1.5 Arial, Helvetica, sans-serif;
}

/* In our demo, the footers are fixed to the bottom of the page */

footer {
    /* position: fixed; */
    bottom: 0;
}

@media (max-height:900px){
    /* footer { position: static; } */
}

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
    width: 40%;
}

/* The company logo */

.footer-distributed h3 {
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
}

.footer-distributed h3 span{
    color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}

.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
    width: 35%;
}

.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

.footer-distributed .footer-center p a{
    color:  #5383d3;
    text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
    width: 20%;
}

.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-distributed .footer-icons{
    margin-top: 25px;
}

.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

    .footer-distributed{
        font: bold 14px sans-serif;
    }

    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer-distributed .footer-center i{
        margin-left: 0;
    }
}

nav {
 clear: both;
 background-color: #f3f1f1;
 border-bottom: 1px solid #dcd9d9;
 height: 48px;
 margin-bottom: 1px;
 display: flex;
}

nav > a, nav > a:link:hover {
 display: flex;
 align-items: center;
 text-decoration: none;
 text-align: center;
 box-sizing: border-box;
 height: 48px;
 padding: 0 15px;
 border-top: 2px solid transparent;
 border-bottom: 2px solid transparent;
}

nav > a:link:hover {
 border-bottom: 2px solid #eaeaea;
}

nav > a:first-of-type {
 margin-left: 40px;
}
nav > a + a {
 margin-left: 40px;
}

nav > a.active {
 border-bottom: 2px solid #ff7400;
}

main {
 margin: 40px auto;
 width: 600px;
}
main h1 {
 margin-bottom: 0.6em;
 margin-top: 0em;
 font-size: 1.4em;
 font-weight: bold;
}
main i.fa {
    text-align: center;
    width: 1.5em;
    margin-left: 0.5em;
}

main .cart {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;

  background-color: #ffffff;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.09);
  margin-top: 20px;
  padding: 15px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

div.cart.update {
  font-size: 1.2em;
}

div.cart.update h3 {
  margin-top: 0.5em;
}

div.cart.update p + p {
  margin-top: 0.2em;
}

div.cart.community {
  display: flex;
}

div.cart.pinned {
 background-color: #fffcf9;
 border-color: #ead6c0;
}

.cart img.thumb {
 margin-bottom: 0.5em;
 object-fit: cover;
}

main .cart div.thumb {
   flex: 1;
   margin-right: 1em;
}

main .cart div.desc {
  flex: 3;
}

main .index {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  justify-content: space-between;
}
main .index .cart {
  display: flex;
  box-sizing: border-box;
  width: 300px;
  width: calc(1/2*100% - (1 - 1/2)*10px);
  margin-top 5px;
  margin-bottom 5px;
}

div:not(.short) > div.shortdesc {
 display: none;
}
div:not(.long) > div.fulldesc {
 display: none;
}

*:link, *:visited {
 /* text-decoration: none; 
 text-decoration: inherit; */
 color: inherit;
}

div.pagination  {
 padding-bottom 3em; font-size: 1.8em; text-align: center;
}

main.text h3 {
 color: rgba(0,0,0,.85);
}

main.text h3 {
 font-size: 24px;
 margin-top: 32px;
 margin-left: -1.5px;
 line-height: 1.22;
 letter-spacing: -.012em;
 font-weight: 600;
 color: rgba(0,0,0,.72);
}

main.text p, main.text ul {
 margin-top: 21px;
 font-size: 18px;
 line-height: 1.58;
 letter-spacing: -.004em;
}
main.text ul {
 margin-left: 35px;
}


a.hashtag:link, a.hashtag:visited {
 text-decoration: none;
 color: #1DA1F2;
}

ul#mainGuide {
    list-style: none;
    padding: 0;
    padding-left: 15px;
}

ul#mainGuide > li {
    position: relative;
    padding-left: 1.5em;
    list-style: none;
    font-size: 1.5em;
}
ul#mainGuide > li::before {
    content: "\f096"; /* Font Awesome unchecked checkbox icon */
    font-family: "FontAwesome"; /* Use Font Awesome font family */
    font-weight: 900; /* Ensure the icon is bold */
    position: absolute; /* Positioning the checkbox */
    left: 0; /* Align left */
    top: 0; /* Align top */
    color: black; /* Color of the checkbox */
}

ul#mainGuide > li > strong {
  cursor: pointer;
}

ul#mainGuide > li.checked::before {
    content: "\f00c";
}

ul#mainGuide > li.checked > p {
  font-size: 0.7em;
}

ul#mainGuide > li.checked {
  color: #1c1c1c;
}

ul#mainGuide > li > p {
  display: none;
}

ul#mainGuide > li:first-of-type:not(.checked) > p.unchecked,
ul#mainGuide > li.checked > p.checked,
ul#mainGuide > li.checked + li:not(.checked) > p.unchecked
{
  display: block;
}

ul#mainGuide > li.checked + li:not(.checked):has(+ li:not(.checked)) {
  margin-bottom: 25px;
}

#mainGuide ul {
  display: flex;
  padding: 0;
  margin: 0;
}
#mainGuide ul > li {
  flex: 1; /* Each <li> will take up an equal amount of space */
  padding: 10px;
  list-style-type: none;
  font-size: 0.7em;
  align-items: center;
  display: flex; /* Make each <li> a flex container */
  align-items: flex-end; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  text-align: center; /* Center-align the text within each <li> */
}

.hidden {
  display: none !important;
}