div.xtot {
 max-width:1100px;
 overflow:auto;
}
@media only screen and (max-width: 520px) {
 body {
  background-image: 
   url('bilder/bjorksta-logo-bg.svg');
  background-repeat: no-repeat;
 /* background-repeat: repeat-y; */
  background-position: left top;
  background-attachment: fixed;
  background-size: 100% auto;
 }
 div.xleft {
  float:left;
  margin: 2px;
  width:60%;
  min-width:130px;
  text-align:center;
 }
 div.xright {
  margin: 2px;
  max-width:99%;
  min-width:240px;
 }
 div.nytt {
 }
}
@media only screen and (min-width: 520px) {

 body {
  background-color:rgba(236,236,236,1);
  background-image: 
   url('bilder/bjorksta-logo-bg.svg'),
   url('bilder/bjorksta-logo-bg-min.png');
  background-repeat: no-repeat, no-repeat;
 /* background-repeat: repeat-y; */
  background-position: left top, left bottom;
  background-attachment: fixed, fixed;
  background-size: 100% auto, auto auto;
 }
 div.xleft {
  float:left;
  margin: 2px;
  width:20%;
  min-width:130px;
  max-width:200px;
  max-height:calc(100vh - 20px);
  overflow:auto;
  text-align:center;
  background-color: rgba(240, 250, 255, 1);
  background-color: rgba(255, 255, 255, 1);
 }
 div.xright {
  margin: 2px;
  max-width:99%;
  min-width:240px;
  max-height:calc(100vh - 20px);
  overflow:scroll;
  background-color: rgba(255, 255, 255, 0.6);
 }
 div.nytt {
  display: none;
 }
}
div.xbg {
 font-size: 12px;
 color: rgb(71, 76, 235);
 background-color: rgba(224, 224, 224, 0);
 text-align:center;
 background-image: url('bilder/triangel.png');
 background-repeat: no-repeat;
/* background-repeat: repeat-y; 
 background-attachment: fixed; 
 background-position: left top; */
 background-size: 100% 100%;
}
html {
font-family: "Verdana", sans-serif;
}

a { text-decoration: none; }

/* responsive image size */
.responsive {
  max-width: 100%;
/*  max-height: auto ; */
 max-height: 700px;
 @media (min-height: 800px) {
  max-height: calc(100vh - 100px);
 }
}

.normleft {
 font-weight: normal;
 text-align: left;
}
.normcent {
 font-weight: normal;
 text-align: center;
}
.header {
background-color: #ffffff;
color: #000000;
padding: 15px;
}

.vertical-menu {
  width: 100%;
}
.vertical-menu a {
  background-color: rgba(71, 121, 235, 0.05);
  color: rgb(71, 76, 235);
  display: block;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.vertical-menu a.active {
  background-color: rgba(71, 121, 235, 0.30);
  color: black;
/*  font-weight: bold; */
}
.vertical-menu a:hover {
  background-color: rgba(71, 76, 235, 1);
  color: white;
}

.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
color: #ffffff;
text-align: center;
font-size: 14px;
padding: 15px;
}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 100%;
  min-width: 190px;
  max-width: 900px;
  overflow: scroll;
  padding: 5px;
  border: 1px solid black;
/*  font-size: 1.8vh; /* justera foer att fylla 16x9-skaerm */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media only screen and (min-width: 800px) {
 .column {
  width: 50%;
 } 
} 
/* Create two equal columns that floats next to each other */
.column1, .column2 {
  float: left;
  width: 100%;
  min-width: 190px;
  max-width: 900px;
  overflow: scroll;
  padding: 5px;
  border: 1px solid black;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media only screen and (min-width: 1000px) {
.column1 {
  float: left;
  width: 60%;
  min-width: 190px;
  max-width: 750px;
  overflow: scroll;
  padding: 5px;
  border: 1px solid black;
/*  font-size: 1.8vh; /* justera foer att fylla 16x9-skaerm */
 }
.column2 {
  float: left;
  width: 40%;
  min-width: 190px;
  overflow: scroll;
  padding: 5px;
  border: 1px solid black;
/*  font-size: 1.8vh; /* justera foer att fylla 16x9-skaerm */
 } 
}