<!--- FROM hOME--->
    #boxWelcome {
       width: 100%;
       min-width:720px;
        border-radius: 10px;
        background-color: #000;
        height: ;
        font-size: 1em;
        color: white;
        margin: 18px;
        opacity: 1;
        align: center;
    }

    #logoImg {
<!--opacity: 0.1;--->
        display: block;
        width: 50%;
        height: auto;
        margin: auto;
padding: 40px;
align: center;
    }

    #welcomeText {
        font-size: 1.3em;
        margin: 50px 18px 10px 18px;
    }

    #welcomeItems {
        list-style-type: none;
        font-size: 1em;
        padding: 0 !important;
        margin: 0 0 0 18px !important;
    }

    #welcomeItems>li {
        margin: 30px !important;
    }


<!--- -----------------------------logo  end------------------------- --->

    #boxesLower {
        
        display: flex;
   
        margin: 0 0px;
   
    }

    #boxesLower>div {
width: 400px;
min-width: 380px;
display: flex;


    }

    #boxesLower>div>div {
opacity: 1;
        flex: 1 1 auto;
        margin: 0 9px 18px 9px;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

    .boxLowerHeader {
        font-size: 1em;
        margin: 0 0 5px 10px;
    }

 .boxLowerHeader_right {
        font-size: 1em;
        margin: 0 0 5px 10px;
color: #fff;
    }

    .LeftrowHeader {
        font-size: 1.8em;
        margin: 0 0 5px 10px;
    }

 #binance {

opacity: 1;
        width: 96%;    
min-width:200px;
        height: auto;
        margin: 1px 0 0 1px;

    }

    #boxStatsLeft {
        min-width:200px;
        border-radius: 10px;
        background-color: #fff;
    }

    #boxStatsRight {
        min-width: 200px;
        border-radius: 10px;
      background-image: url("/static/opacity5.png");  

  
    }



    .boxStats {

        color: #222;
        font-size: 0.9em;
    }

    .boxStatsList {
background-color: #fff;
        display: flex;
        flex-flow: row wrap;
        justify-content: left;
        opacity: 1;
        margin-bottom: 5px;
        flex: 1 1 auto;
        align-content: left;
    }

    .boxStatsList2 {
<!--- background-color: #000; --->
<!--- color: ffbc19;  --->
        color: ffc600;
 font-size: 1em;
        display: flex;
        flex-flow: row wrap;
        justify-content: left;
        opacity: 1;
        margin-bottom: 5px;
        flex: 1 1 auto;
        align-content: left;
    }
    .boxStatsList i.fa {
        height: 15px;
        width: 33px;
       
    }

    .boxStatsList>div {
  text-align: left;
        padding: 5px 20px;
    }

    .boxStatsList>div>div {
 
        padding: 3px;
    }



<!--- yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy --->



.pure-g [class *="pure-u"] {
    font-family: "Noto Sans", sans-serif;
    <!--- font-optical-sizing: auto; --->
font-size: 1em;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;

}

html {

    overflow-y: scroll;
}

.pure-menu-horizontal {
width: 100%;
}



body {
  

    justify-content: center;
    align-items: left;
    <!---background-color: #fff;--->
    color: #fff;
    font-family: Arial, sans-serif;
   
    background-image: url("/static/12.png");
    width:100%;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    align: center;
    display: flex;
    flex-direction: column;
<!---column--->
    margin: 0 auto;
}

main {
background: transparent;
opacity: 1;
width:100%;  
 position: relative;
  display: flex !important;
 flex-direction: column; <!--- dont change this -->
    align-items: center;
    justify-content: center;
}

footer {

    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 0.8em;
    padding: 15px;
    line-height: 24px;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer iframe {
    vertical-align: middle;
}

.home-menu>a.pure-menu-heading {
<!--- small bg behind top logo --->

    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0em 0em 0em 1em;
    line-height: normal !important;
    font-family: nasa;
    color: #999;
    font-size: 3em;

}

.custom-wrapper {
    
    width: 100%;
    background-color: transparent;
opacity: 1;
    margin-bottom: 0.1em;
    -webkit-font-smoothing: antialiased;
    height: 5em;
    overflow: visible;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
}

.custom-wrapper.open {

    height: 18em;
}

.custom-menu {
font-size: 1.2em;
    text-align: left;
    margin: 0.6em 0em 1em 1em;
}

.custom-toggle {
    width: 40px;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.custom-toggle .bar {
    background-color: blue;
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 100px;
    position: absolute;
    top: 24px;
    right: 10px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

.custom-toggle .bar:first-child {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}

.custom-toggle.x .bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.custom-toggle.x .bar:first-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.pure-menu-has-children {
    position: relative;
}

.pure-menu-children {
    left: 3em;
    top: 2em;
}

a.pure-menu-link { <!-- color of the menu links --->
    color: #fff;
    text-align: left;
    text-decoration: none;
}

a.pure-menu-link:hover,
a.pure-menu-link:focus,
a.pure-menu-link:active {
 border-radius: 5px;
    background: #444444;
    color: #ffffff;
}

.pure-menu-link,
.pure-menu-heading {
    color: #ffffff;
}

select {
    background-color: #2d2d2d;
    color: #ffffff;
    border: 0px;
    padding: 10px;
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

select:hover,
select:focus {
    background-color: 111;
    color: #ffffff;
    outline: none;
}

option {
    background-color: #2d2d2d;
    color: #ffffff;
}

option:hover,
option:focus {
    background-color: #444444;
    color: #ffffff;
}

option:checked {
    background-color: #777;
    color: #ffffff;
}

<!-- @media (max-width: 47.999em) { -->
<!--- @media (width: 100%) { --->

    .custom-menu {
font-size: 2em;
        text-align: left;
    }

    .custom-toggle {
        display: block;
    }


communityFooter {

height: 25px;

}