.chatwrapper{
display:flex;
flex-flow:row wrap;
font-weight:700;
width: 100%; 
height:100vh; 
margin:0 auto; 
padding:0;
text-align:center}

.chatwrapper>*{
padding:10px;
flex:1 100%}

/* Sidebar/left column */
.aside { border-right: 1px solid orange;
  max-width: 200px; height:100vh; padding:0;
 /* background: url("inc/gfx/dark_bg.jpg") #000; repeat;*/
  background: #fff;
 order: 1;
}

.aside-1{
background:#fff;
border-right:1px solid #ccc}


.aside-2{background:#fff;
border-left:1px solid #ccc}

/* Main column */
.main {text-align:left;
border-left:1px solid #bababa;
  background-color: #fff ;
  order: 2;
}

@media all and (min-width:800px){
    .aside{flex:1 0 0}
    }




/* If the browser window is smaller than 800px no col */
@media only screen and (max-width: 800px) {
  .aside{
    display:none;
  }
}

@media all and (min-width:800px){
.main{flex:6 0px}
.aside-1{order:1}
.main{order:2}
.aside-2{order:3}
.footer{order:4}
}

@media all and (max-width:800px){
.main{flex:4 0px}
.aside-1{order:2}
.main{order:1}
.aside-2{order:3}
.footer{order:4}}

/* ---- V thumbs in aboutbox ---- */
.contthumbsv {
   display:flex;
    justify-content: center;
}

.thumbs200v{max-width:120px;}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
  .contthumbsv{
    flex-direction: column; 
  }
   .thumbsv{
 max-width:120px;
  }
}

/* ---- ./ V thumbs ---- */