@charset "utf-8";
/* CSS Document */



/* For mobil width 320px o upp max 480 */
@media only screen and (min-width: 320px) and (orientation: portrait) 
{	
.Hrubrik {
	font-size:16px;
}
  .logoA {
   float:left;
	width: 130px;
  }
  .bannerBG {
 /*  background-image: url('images/<%=rec("toppbildmini")%>');
	height:250px;
	height: 500px;*/
	width:100%;
	background-size: cover;
	background-position: center;
  }
   div.transbox {
    font-size: 18pt;
	 margin: 10px;
  }
 
 /*färgflikar*/
   #example2B {
  padding: 10px;
  margin-top:10px;
  border-top-left-radius:10px;
  border-Top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:10pt;
	 font-weight:bold;
	 margin-top:230px;
	
  } 
}
/*landscape*/
@media only screen and (min-device-width: 320px) and (orientation: landscape)
{
	.Hrubrik {
	font-size:20px;
}
.logoA {
   float:left;
	width:130px;
  }
  .bannerBG {
   /*background-image: url('images/<%=rec("toppbild")%>');
	height: 500px;*/
	width:100%;
	background-size: cover;
	background-position: center;
  }
   div.transbox {
   font-size: 18pt;
   margin: 10px;
  }
 
 /*färgflikar*/
   #example2B {
   padding: 10px;
   margin-top:10px;
  border-top-left-radius:10px;
  border-Top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:10pt;
	 font-weight:bold;
	 margin-top:10px;
	
  }
  }

/* Medium devices (landscape tablets, 720px ) */
@media only screen and (min-width: 720px)and (orientation: portrait) {
	 .logoA {
   float:left;
	width: 150px;
	 }
	 .Hrubrik {
	font-size:20pt;
}
 
  .bannerBG {
    /*background-image: url('images/<%=rec("toppbild")%>');
	height:600px;*/
	width:100%;
	background-size: cover;
	background-position: center;
	position: relative;
  }
   div.transbox {
    font-size: 20pt;
	 margin: 15px;
  }
  
   /*färgflikar*/
   #example2B {
padding: 15px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:10pt;
	 font-weight:bold;
	  margin-top:220px;
	
  }
}

@media only screen and (min-width: 720)and (orientation: landscape) {
	 .logoA {
   float:left;
	width: 150px;
  }
   .Hrubrik {
	font-size:20pt;
}
  .bannerBG {
    /*background-image: url('images/<%=rec("toppbild")%>');
	height:600px;*/
	width:100%;
	background-size: cover;
	background-position: center;
	position: relative;
  }
   div.transbox {
    font-size: 20pt;
	 margin: 15px;
  }
  
   /*färgflikar*/
   #example2B {
padding: 15px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:10pt;
	 font-weight:bold;
	  margin-top:150px;
	
  }
}
/*  (landscape tablets, 992px ) */
@media only screen and (min-width: 992px)and (orientation: portrait) {
	 .logoA {
   float:left;
	width: 280px;
  }
   .Hrubrik {
	font-size:30pt;
}
  .bannerBG {
   /* background-image: url('images/<%=rec("toppbild")%>');
	height:500px;*/
	width:100%;
	background-size: cover;
	background-position: center;
  }
   div.transbox {
    font-size: 30pt;
  }
 
  
  /*färgflikar*/
   #example2B {
padding: 20px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:12pt;
	 font-weight:bold;
	  margin-top:130px;
	
  }

}
@media only screen and (min-width: 992px)and (orientation: landscape) {
	 .logoA {
   float:left;
	width: 280px;
  }
   .Hrubrik {
	font-size:30pt;
}
  .bannerBG {
   /* background-image: url('images/<%=rec("toppbild")%>');
	height:500px;*/
	width:100%;
	background-size: cover;
	background-position: center;
  }
   div.transbox {
    font-size: 30pt;
  }
 
  
  /*färgflikar*/
   #example2B {
padding: 20px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:12pt;
	 font-weight:bold;
	  margin-top:50px;
	
  }

}

/* XL (stora */
@media only screen and (min-width: 1200px)and (orientation: landscape) {
	 .logoA {
   float:left;
	width: 400px;
  }
   .Hrubrik {
	font-size:30pt;
}
  .bannerBG {
   /* background-image: url('images/<%=rec("toppbild")%>');
	height:770px;*/
	width:100%;
	background-size: cover;
	background-position: center;
  }
   div.transbox {
    font-size: 30pt;
	 margin: 30px;
  }
  
  
   /*flikar*/
   #example2B {
padding: 10px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:16pt;
	 font-weight:bold;
	  margin-top:10px;
	
  }
}

/* XxL  */
@media only screen and (min-width: 1920px)and (orientation: landscape) {
	 .logoA {
   float:left;
	width: 400px;
  }
   .Hrubrik {
	font-size:40pt;
}
  .bannerBG {
  /*  background-image: url('images/<%=rec("toppbild")%>');
	height:780px;*/
	width:100%;
	background-size: cover;
	background-position: center;
	
  }
   div.transbox {
    font-size: 30pt;
	 margin: 30px;
  }
  
  
   /*flikar*/
   #example2B {
padding: 12px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
	color: #ffffff;
	text-align:center;
	font-size:16pt;
	 font-weight:bold;
	  margin-top:50px;
	
  }
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px; /*org 15*/
  border: 0px solid grey;
  
 
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-Ny {width: 19%;}


/********************* /* For mobile phones: ****staplas ovanpå*************
@media only screen and (max-width: 768px) {
 
  [class*="col-"] {
    width: 100%;
  }
}
*/


/* vit border */
hr.linje {
  border-top: 1px solid white;
}

/* Container for flexboxes */
.Flexrow {
  display: flex;
  flex-wrap: wrap;
}

/* Create 2 equal columns */
.Flexcolumn {
  flex: 50%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .Flexcolumn {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .Flexrow {
    flex-direction: column;
  }
}


body,td,th {
	font-family: Roboto, sans-serif;
}


div.transbox {
  margin: 30px;
 /* background-color: #ffffff;
  border: 0px solid black;
  opacity: 0.1;*/
}



div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #ffffff;
   font-family: 'Roboto', sans-serif;
}