/*    resp.css 
  */

#struc { 
background: url(http://ejnar.se/bakgrund/structure.jpg);
color:		navy;
} 

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: helvetica, "Lucida Sans", sans-serif;
} 

a { 
 font-size: 	100%; 	
 color:  		#000;
 font-weight: 	bold; 
 background: 	transparent; 
 text-decoration: none; 
 }

a:hover { 
 color: 		red; 
 } 
 /* 
 tar bort den vita bakgrund vid hover 18 okt */
 
b {
  color: red;
} 

.container {
    overflow: hidden;
    background-color: #006400; 
    font-family: Arial;
}

.container a {
    float: left;
    font-size: 1.4rem;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.container a:hover { 
color: 	navy;
} 

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 1.4rem; 
	font-weight: bold;	
    border: none;
    outline: none;
    color: white;
    padding: 12px 16px 15px 16px;
    background-color: inherit;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}
	
/* 
insert 9 juni drop down code
*/

h2 { 
font-size: 2.0em; 
font-size: 2.0rem;
padding: 2px 4px 2px 1px;
}

h3 { 
font-size: 1.7em; /* nytt 6 juli */
font-size: 1.7rem;
padding: 2px 5px 2px 0;
}

h4 { 
font-size: 1.5em;
font-size: 1.5rem;
padding: 2px 7px;
}

h5 { 
font-size: 1.2em;
font-size: 1.2rem;
padding: 5px;
}

.bol {
font-size:		1.0rem;
font-weight: 	700;
color:			maroon;
background: 	transparent;
margin-left: 	1rem;
}

img { 
max-width: 100%;
height:	auto; 
}
	
img a { 
padding: 0; 
background-color: transparent;
}
 	
img a:hover { 
padding: 0; 
background-color: transparent;
}
 
img.wide {
float: 	none;
width: 	100%;
max-width: 100%; 
height: auto;
}

img.line {  
height: 5px;
width:98%;
text-align: center;
}
 
img.inline {  
display: inline;
}
 
.videoContainer { /* Blockhusudden i tal dot h */
position: relative;
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
 
.videoContainer iframe,
.videoContainer object, 
.videoContainer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 

.cc {
text-align:	center;
}

.header { 
    background-color: #008080;
    color: 			#ffffcc;
    padding: 		15px;
}	

.headervit { 
    background-color: #fff;
    color: 			#0a0;
    padding: 		1.6rem;
}
	
.menu { 
background-color: #ffd;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33ffff;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}

.menu h3 {
	padding: 1.0rem 1.0rem 1.0rem 0.4rem;
	margin-left: 0.4rem; /* t ex herat nu menyn i aftonkol */
	}
	
.aside {
    background-color: #afeeee; /* den 15/5 alter to ljusare p */
    padding: 15px;
    color: #483d8b;
    text-align: left;   /* var ju cc tidigare */
    font-size: 1.2rem;
}
.section {
    background-color: #ffb; 
    padding: 5px;
    color: #003d8b;
    text-align: left;
	width: 100%;
	margin: 0 auto;	
    font-size: 1.0rem;
	
} 	

.footer {
    background-color: #fafad2;
    color: #000;
    text-align: left;
    font-size: 1.0rem;
    padding: 8px 4px;
}

.crimson {
font-family:	"Helvetica Neue", Helvetica, sans-serif;
color:			crimson;
background:		#ffc;
padding:		1rem;
text-shadow:	-1px 2px 2px #bbb;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 740px) {
    /* var 600 for tablets: */
    .col-m-12 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 900px) {
    /* var 768 for desktop: */
    .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%;}
}

@media screen and (min-width: 1050px) {
  
a { 
 font-size: 	100%; 	
 color:  		#000;
 font-weight: 	bold; 
 background: 	transparent; 
 text-decoration: none; 
 }

a:hover { 
 color: 		red; 
 background: 	transparent;
 }   
 
 
.bol {
font-size:		1.1rem;
font-weight: 	700;
color:			maroon;
background: 	transparent;
margin-left: 	1rem;
}

b {
  color: red;
}

hr {
background-color:#ffc;
color:	sienna;
}

.vow {
font-size: 	1.6rem;
padding:	1.0rem;
padding:	12px;
color: white;
text-shadow: 1px 1px 2px red, 0 0 25px blue, 0 0 5px black;
}

.ment { 
font-size:  	1.3rem; 
color:			red; 
background: 	transparent; 
font-weight:	bolder;
padding: 	 	0.8rem;
} 

.obs {
font-size: 	1.2rem;
text-align: left;
}

.bol {
font-size:		1.1em;
font-size:		1.1rem;
font-weight: 	700;
color:			maroon;
background: 	transparent;
margin-left: 	1rem;
}

.low {
font-size: 0.8em;
}

.kol {
-webkit-column-width:	18rem;	
-o-column-width:		18rem;	
-moz-column-width:		18rem;	
column-width: 			18rem;	
} 
	
.vita {
font-family:	Verdana, Tahoma, Helvetica, sans-serif;
color:			red;
text-shadow:	1px 1px 3px #699;
}

.section {
width: 80%;
}

img.wide {
width: 	100%;
max-width: 100%; 
height: auto;
margin: auto;
}
}

@media screen and (min-width: 1400px) {
#main {
width: 93%;
margin: 0.5rem auto;
}


#eng { 
width: 90%;
margin: 0 auto;
}

.bol {
font-size:		1.2rem;
}

.section {
width: 70%;
}
}

  @media screen and (min-width: 1800px) {
#main {
width: 90%;
margin: 0.5rem auto;
}

#eng { 
width: 80%;
margin: 0 auto;
}

.bol {
font-size:		1.3rem;
}

.obs {
font-size: 	1.2rem;
text-align: left;
font-weight: bold;
color: navy;
}

.section {
width: 65%;
}
.kol {
-webkit-column-width:	24rem;	
-o-column-width:		24rem;	
-moz-column-width:		24rem;	
column-width: 			24rem;	
 } 
.wide {
width: 	100%;
max-width: 100%; 
height: auto;
margin: auto;
}
}
 
/*  resp.css  	fix försök de där me a och
hover okt 2017   */