@font-face{font-family:baskervville; src: url('woff/baskervville-regular.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face{font-family:baskervville; src: url('woff/baskervville-italic.woff') format('woff'); font-weight: normal; font-style: italic;}
@font-face{font-family:garamond; src: url('woff/EBGaramond08-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face{font-family:garamond; src: url('woff/EBGaramond08-Italic.woff') format('woff'); font-weight: normal; font-style: italic;}
@font-face{font-family:garamond; src: url('woff/EBGaramondSC08-Regular.woff') format('woff'); font-weight: normal; font-variant: small-caps;}
@font-face{font-family:Free_Paladin; src: url('woff/Free_Paladin_Roman.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face{font-family:Free_Paladin; src: url('woff/Free_Paladin_Bold.woff') format('woff'); font-weight: bold; font-style: normal;}
@font-face{font-family:Free_Paladin; src: url('woff/URWPalladioCYR-Ital.woff') format('woff'); font-weight: normal; font-style: italic;}
@font-face{font-family:Free_Paladin; src: url('woff/Free_Paladin_BoldItalics.woff') format('woff'); font-weight: bold; font-style: italic;}
@font-face{font-family:palatino; src: url('woff/palatino-roman.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face{font-family:palatino; src: url('woff/palatino-bold.woff') format('woff'); font-weight: bold; font-style: normal;}
@font-face{font-family:palatino; src: url('woff/palatino-italics.woff') format('woff'); font-weight: normal; font-style: italic;}
@font-face{font-family:Free_Paladin_gs; src: url('woff/Free_Paladin_Roman_gs.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face{font-family:Free_Paladin_gs; src: url('woff/Free_Paladin_Italics_gs.woff') format('woff'); font-weight: normal; font-style: italic;}
@font-face{font-family:Free_Paladin_gs; src: url('woff/Free_Paladin_Bold_gs.woff') format('woff'); font-weight: bold; font-style: normal;}
@font-face{font-family:Baskervald; src: url('woff/baskervald-heavy.woff') format('woff'); font-weight: bold; font-style: normal;}
@font-face{font-family:Cantarell-Bold; src: url('woff/Cantarell-Bold.woff') format('woff'); font-weight: bold;}


html{height:100vh; background-color:white;}
body{height:100vh; width: 100%; margin: auto; background-color: white; font-family:Free_Paladin;}
.sida {display: flex; flex-flow: column; height: 100%;}
h3{font-family: Free_Paladin; font-weight:bold; color: #20205A; padding-top:0; margin-top:0;}
h4{font-family: Free_Paladin; font-weight:bold; background-color: grey; color: white; border-bottom:1px solid black; padding: 5px;}
.logo{text-decoration:none; border-radius:50%; float:left; margin-left:30px; margin-bottom: 10px; margin-top: 10px; font-size:24pt; font-family:'Free_Paladin'; width:35%; background-color:#20205A; border:1px solid #20205A; color:white; padding:5px; text-align: center;}
.logo:hover{background-color:white; color: black; border: 1px solid red;} 
.logo:active{background-color:black; color: white; border: 1px solid red;}
.namn{float:right; margin-right: 30px; margin-bottom: 10px; margin-top: 10px; font-size:24pt; font-family:'Free_Paladin'; width:35%; color:#20205A; padding:5px; text-align: right;}
.rad:after{content: ""; display: table; clear: both;}
.atransp{flex: auto;  margin: 4px; color:#20205A; background-color: #BFBFBF; border:1px solid #BFBFBF; border-radius:50%; padding:10px; font-family:'Cantarell-Bold'; font-size:20px;}
.atransp:hover{background-color: white; color:#20205A; border: 1px solid red;}
.atransp:active{background-color:black; color:white;border: 1px solid red;}
.film{flex: auto; float: left; margin-left:15px; margin-bottom: 4px; background-color:#BFBFBF; color:black; border:1px solid #BFBFBF; border-radius: 50%;  padding:10px;}
.film:hover{background-color: white; color:black; border: 1px solid red;}
.film:active{background-color: black; color:white; border: 1px solid red;}
.fakta{background-color:white; padding:0px; border-radius:5px; box-shadow: 10px 10px 5px; max-height:95%; position: absolute; top:25%; left:15%; visibility: hidden; opacity: 0.9; min-width: 200px; max-width:95%; text-align: justify; hyphens: auto; overflow: auto; margin: auto;}
.stang{border:1px solid white; background-color:white; position:absolute; right:3px;}
.stang:hover{border: 1px solid black; float: right;}
.faktarubrik{float:left; font-family: Free_Paladin; font-weight: bold; background-color: #20205a; color: white; width: 100%;padding-left:4px;}
.lnkar:hover{color:black; background-color: white; border:1px solid red;}
.lnkar:active{color:white; background-color: black; border:1px solid red;}
.lnkar{float: left; color:white; text-decoration: none; padding: 4px; background-color:#20205A; border:1px solid #20205A; margin-left:5px; margin-right:5px}
.tomlnkar{float: left; color:white; text-decoration: none; padding: 4px; background-color:grey; border: 1px solid grey; margin-left:5px; margin-right: 5px;}
.bild{max-width:95%;}
.streckram{border: 1px dashed #20205a; background-color:#20205a;}
.streckram:hover{background-color: grey;}
.streckram:active{background-color: black; border: 1px solid red;}
.lnkbild{max-height: 100%;}
.credd{text-align:right; font-style: italic;}

table{border:0px; width:100%;}
tr{background-color: white; border:0px;}
tr.gra{background-color: #BFBFBF; border:0px;}
td{padding: 3px; white-space:nowrap;}
div.byline{font-size:7pt; align-self: flex-end; padding-bottom: 20px; text-align: center; width: 100%;}
a.byline{color: black; text-decoration: none;}
.anfang {color: #20205A; float: left; font-family: 'Baskervald'; font-weight: bold; font-size: 83px; line-height: 70px; margin-right:4px; margin-bottom: -10px;}
.faktavideorad{flex-grow : 1; text-align:center; vertical-align: top; overflow:hidden;}
.faktatextruta{float: right; width:35%; height: 100%; }
.faktatext{line-height: 1.4em; font-family:'palatino'; font-variant: oldstyle-nums; width:100%; border-radius: 5px; text-align: justify; overflow: auto; hyphens: auto; height: 80%;  width:80%; margin: 20px; padding:20px; border: 1px dotted #20205A;}
.huvud{background-color:#E6E6FA; height:80px;}
.linkar{background-color:#BFBFBF; height:34px; margin-bottom: 20px; padding-left: 20px;}
.v-knappar{display: flex; flex-flow: column; float: left; width:10%; height:95%;}
.videodiv{display: flex; flex-flow: column; float: left; width:45%; height:100%; text-align: center;}
.videospelare{max-width:95%; margin: auto;}
.novideoimg{max-width:95%; position: absolute; top:0%; left:0%; margin: auto;}
.videokontrollruta{display: flex; flex-flow: column; float: left; width: 10%; height: 95%;}
.faktabar{position:sticky; height:30px; z-index:5; top:0px; right:3px; background-color:white; border-bottom:1px solid black;margin:5px;}
.innerruta{padding: 10px; width:460px;}
.bilbild{max-width:50%;}
.kapitaler{font-family: 'Free_Paladin'; font-variant: small-caps; font-weight: bold;}

@media only screen and (max-width: 800px) and (orientation: portrait) { /*ipad, stående*/
	.film{flex: 1; float: none; margin-left:3px; margin-bottom: 0px; background-color:#BFBFBF; color:black; border:1px solid #BFBFBF; border-radius: 50%;  padding:0px;}
	.streckram{border: 1px dashed #20205a; background-color:#20205a;}
	.streckram:hover{background-color: grey;}
	.streckram:active{background-color: black; border: 1px solid red;}	 
	.videokontrollruta{flex-flow: row; float: none; width: 95%; height: auto; margin: auto;}
	.videodiv{display: flex; flex-flow: column; float: left; width:100%; height:auto; text-align: center;}
	.faktatextruta{float: none; margin:auto; width:100%; height: auto; }
	.logo{line-height:1em; font-size:18pt; border-radius:10px; }
	.namn{font-size:14pt;}
	.fakta{left:50px; top:50px; max-width: 300px;}
	.innerruta{width:260px;}
	.faktavideorad{overflow: auto;}
}

@media only screen and (max-width: 600px) and (orientation: portrait) { /*mobil, stående*/
/*	.atransp{width:60px; height: 50px; font-size: 10pt; padding: 1px;}
	.v-knappar{float: none; width: 100%; height: 55px; padding-left:0px;}
	.film{width:60px; height: 50px; font-size: 10pt; float: left; padding: 1px;}
	.videodiv{float: none;width: 100%; height: auto; }
	.videokontrollruta{float: none; width: 100%; height: auto; padding-right:0px;}
	.videodiv:after{content: ""; display: table; clear: both;}*/
	.linkar{padding-left: 10px; height:68px;}	
	.lnkar{font-size:14px;}
	.tomlnkar{font-size:14px;}
	.logo{line-height:1em; font-size:14pt; border-radius:10px;}
	.namn{font-size:14pt;}
	.fakta{left:20px; top:20px;}
	.innerruta{width:260px;}
	.lnkbild{display: none;}
}

@media only screen and (max-width: 400px) and (orientation: portrait) { /*mindre mobil, stående*/
	.lnkar{font-size: 12px;}
/*	.atransp{width:50px; height: 40px; font-size: 10pt; padding: 1px;}
	.film{width:50px; height: 40px; font-size: 10pt; padding: 1px;}*/

}

@media only screen and (max-width: 1100px) and (orientation: landscape) { /*ipad, liggande*/
/*
	.faktatextruta{float: none; width:100%; height: 100%; }
	.faktatextruta:before{clear: all;}
	.film{margin-bottom: 30px;}
*/
	.film{flex: 1; float: none; margin-left:2%; margin-bottom: 3px; background-color:#BFBFBF; color:black; border:1px solid #BFBFBF; border-radius: 50%;  padding:0px;}
	.streckram{border: 1px dashed #20205a; background-color:#20205a;}
	.streckram:hover{background-color: grey;}
	.streckram:active{background-color: black; border: 1px solid red;}	 
	.videokontrollruta{flex-flow: column; float: left; width: 10%; height: auto; margin: auto;}
	.videodiv{display: flex; flex-flow: column; float: left; width:78%; height:auto; text-align: center; vertical-align: top;}
	.faktatextruta{float: none; margin:auto; width:60%; height: auto; }
	.logo{line-height:1em; font-size:18pt; border-radius:10px; }
	.namn{font-size:14pt;}
	.fakta{left:50px; top:50px;}
	.innerruta{width:260px;}
	.faktavideorad{overflow: auto;}
	.faktakontrollruta{float:right; margin-left:0; margin-right:2%;}
	.lnkbild{display: none;}

}

@media only screen and (max-width: 900px) and (orientation: landscape) { /*mobil, liggande*/
	.linkar{padding-left: 10px;}	
	.lnkar{font-size:12px;}
	.tomlnkar{font-size:12px;}
	.logo{line-height:1em; font-size:16pt; border-radius:10px;}
	.namn{font-size:14pt;}
	.fakta{left:20px; top:20px;}
	.videospelare{align-self: flex-start; max-height:200px; width: auto;}	
	div.byline{align-self: flex-start; padding-bottom: 1%; 	
		/*.atransp{width:60px; height: 45px; font-size: 12pt; padding: 1px;}
	.film{width:60px; height: 45px; font-size: 14pt; padding: 1px;}
	.film{margin-bottom: 4px;}

	.innerruta{width:260px;}
	.videokontrollruta{width: 10%; height:80%;}
	.videodiv{width:80%;}
	.faktavideorad{overflow:auto;}*/
}

@media only screen and (max-height: 400px) and (orientation: landscape) { /*mindre mobil, liggande*/
	.logo{font-size:14pt;	/*.atransp{float: left; width:50px; height: 40px; font-size: 10pt; padding: 1px;}
	.film{float: right; width:50px; height: 40px; font-size: 10pt; padding: 1px;}
	.v-knappar{float: left; width: 12%; height: 100%; padding-left:5px;}
	.videodiv{float: left;width: 70%; height: 100%; }
	.videokontrollruta{float: right; width: 12%; height: 100%; padding-right:5px;}*/
}