html {font-size: 20px; font-family: Arial, Helvetica, sans-serif;padding:0;}
body{margin:0px;line-height:1.5rem;cursor: default;background-color:#000;padding:0;box-sizing: border-box;max-widthx:390px;widthx:390px;}
.page{display:flex;flex-direction:column;background-color:#333333;min-height:100vh;}
.pageHeader{display:flex;background-color:#000;color:#fff;}
.pageMessage{flex-grow: 1;background-color:#333333;}
.pageBody{display:flex;justify-content:center;background-color:#fff; backgroundx: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(72,100,3,1) 50%, rgba(0,0,0,1) 100%);}
.leftContent {
    displayx: none;
    flex:1 1 10%;
    overflow:hidden;
    background-color: darkblue;
    color: #fff;
}
.mainContent {
    flex: 1 1 auto;
    overflow: hidden;
    color: black;
    min-height: 100vh;
    max-width:900px;
    padding: 0;
}
.rightContent {
    displayx: none;
    flex:1 1 10%;
    overflow:hidden;
    background-color: red;
    color: #fff;
}
.pageFooter{background-color:#000;color:#fff;text-align:center;}

/*css helpers start*/
.nd{display:none;}
.socialIcon {height: 36px;margin: 5px;}
/*css helpers end*/


.splash-text{display:flex;background-color:orange;border-radius:7px;}
/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    .leftContent{display:none;}
    .mainContent{flex-grow: 1;min-height:150vh;margin:0;padding:0;
                 backgroundx: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(72,100,3,1) 50%, rgba(0,0,0,1) 100%);}
    .rightContent{display:none;}
    .header-menu-imgBtn {display:block;}
    #carousel{max-width:90%;}
    .splash-text{flex-direction:column;}
}
@media screen and (max-width: 389px) {
    .socialIcon {display:none;}
}
@media screen and (orientation: landscape) {
    #bbx{display:none;}
}