@font-face {
    font-family: 'Source Sans Pro Bold';
    src: url('../fonts/SourceSansPro-Bold.eot');
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Bold.woff') format('woff'),
        url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Bold.svg#fonts/SourceSansPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro Light';
    src: url('../fonts/SourceSansPro-Light.eot');
    src: url('../fonts/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Light.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Light.woff') format('woff'),
        url('../fonts/SourceSansPro-Light.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Light.svg#fonts/SourceSansPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro SemiboldItalic';
    src: url('../fonts/SourceSansPro-SemiboldIt.eot');
    src: url('../fonts/SourceSansPro-SemiboldIt.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-SemiboldIt.woff2') format('woff2'),
        url('../fonts/SourceSansPro-SemiboldIt.woff') format('woff'),
        url('../fonts/SourceSansPro-SemiboldIt.ttf') format('truetype'),
        url('../fonts/SourceSansPro-SemiboldIt.svg#fonts/SourceSansPro-SemiboldIt') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro Regular';
    src: url('../fonts/SourceSansPro-Regular.eot');
    src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Regular.woff') format('woff'),
        url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Regular.svg#fonts/SourceSansPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro RegularItalic';
    src: url('../fonts/SourceSansPro-It.eot');
    src: url('../fonts/SourceSansPro-It.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-It.woff2') format('woff2'),
        url('../fonts/SourceSansPro-It.woff') format('woff'),
        url('../fonts/SourceSansPro-It.ttf') format('truetype'),
        url('../fonts/SourceSansPro-It.svg#fonts/SourceSansPro-It') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro Semibold';
    src: url('../fonts/SourceSansPro-Semibold.eot');
    src: url('../fonts/SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-Semibold.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Semibold.woff') format('woff'),
        url('../fonts/SourceSansPro-Semibold.ttf') format('truetype'),
        url('../fonts/SourceSansPro-Semibold.svg#fonts/SourceSansPro-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro LightItalic';
    src: url('../fonts/SourceSansPro-LightIt.eot');
    src: url('../fonts/SourceSansPro-LightIt.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SourceSansPro-LightIt.woff2') format('woff2'),
        url('../fonts/SourceSansPro-LightIt.woff') format('woff'),
        url('../fonts/SourceSansPro-LightIt.ttf') format('truetype'),
        url('../fonts/SourceSansPro-LightIt.svg#fonts/SourceSansPro-LightIt') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}		
		
		html{margin:0;padding:0;}
		body{background-image: linear-gradient(#c96d7a, #c43c6e);margin:0;padding:0;font-family: "Source Sans Pro Regular", Helvetica, Arial, sans-serif;}
		table{border:0px solid blue;width:100vw;height:auto;margin:0;padding:0;border-collapse: collapse;}
		table#top{height:15dvh;position:fixed;z-index:100;top:0;}
		table#bottom{height:auto;width:100%;position:relative;margin:0 auto 0 auto;padding:0;border-collapse: collapse;}
		tr{border:0px solid yellow;margin:0;padding:0;}
		td{border:0px solid grey;display:table-cell;margin:0;padding:0;}
		td#mittvy{border:0px solid #c64777;width:80dvh;z-index:10;overflow:hidden;}
		td#topmitt{border:0px solid #c64777;width:80dvh;z-index:10;overflow:hidden;}
		td#sidfot{border:0px solid #c64777;width:80dvh;z-index:10;overflow:hidden;opacity:1;}
		p{margin:0;padding:0;}
		
		#instruktionsknapp{cursor:pointer;}
		#instruktion{border:0px solid red;z-index:100;position:absolute;width:80dvh;margin:0;height:100dvh;background-color:#398d8b;}
		#instrclose{text-align:center;width:2dvh;padding:1dvh;font-size:2dvh;cursor:pointer;margin:2dvh auto;background-color:#efefef;color:#398d8b;}
		#instrbild{height:80%;width:76dvh;overflow-x:scroll;overflow-y:hidden;margin:3dvh 1dvh 0 1dvh;background-color:#efefef;border:1dvh solid #efefef;}
		#instrbild img{height:100%;}
		#boxbild{height:auto;width:100%;overflow:hidden;margin:0 0 0 0;border-top:1px solid #192e2f;border-bottom:1px solid #398d8b;background-color:#a4c3ee;padding:4dvh 0;}
		#boxbild img{width:125%;margin:-7% auto;display:block;}
		.ovremitt{border:0px solid blue;display:block;position:relative;height:auto;width:80dvh;background-color:#0c585c;margin:0;padding:0;
			background-image: url("../svg/indexbakgrund.svg");
			background-repeat:no-repeat;
			background-position: bottom center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
		}
		.mittmitt{border:0px solid blue;display:block;position:relative;height:auto;width:80dvh;background-color:#074d51;margin:0;padding:0;
			
		}
		.mittmittunder{border:0px solid blue;position:relative;height:auto;width:80dvh;margin:0;padding:0;}
		#huvud{position:relative;display:block;height:15dvh;margin:0;padding:0;z-index:10;}
		#huvudbakgrund{background-color:#398d8b;opacity:0.9;width:100%;height:100%;display:block;position:absolute;margin:0;padding:0;z-index:0;}
		
		#btmtillbaka{width:2.5dvh;height:auto;display:none;position:absolute;left:3dvh;top:3dvh;cursor:pointer;z-index:2;}
		#btmtillbaka img{width:100%;height:100%;}
		#btmlogo{border-top:1px solid transparent;width:20dvh;height:auto;position:relative;top:0;margin:0 auto;}
		#btmlogo svg{border:0px solid blue;display:block;position:relative;width:100%;height:auto;left:0;margin:2dvh auto 0 auto;padding:0;}
		#btmlogo2{border-top:0px solid red;width:20dvh;height:auto;position:relative;top:0;margin:0 auto 0 auto;padding-top:15dvh;}
		#btmlogo2 svg{border:0px solid blue;display:block;position:relative;width:100%;height:auto;left:0;margin:2dvh auto 0 auto;padding:0;}
		#spotifylogo{width:9dvh;height:auto;position:absolute;right:2dvh;top:3dvh;cursor:pointer;z-index:2;}
		#spotifylogo img{width:100%;height:100%;}
		
		#breadmeny{border:0px solid #0c585c;background-color:transparent;position:absolute;left:0dvh;z-index:11;}
		#breadmeny p{background-color:#de7b17;margin-bottom:2px;padding:1dvh 2dvh 1dvh 1dvh;width:auto;display:block;position:relative;cursor:pointer;}
		#breadmeny a{color:#fff;text-decoration:none;}
		#breadmeny img{width:2.5dvh;}
		#btmlogotop{width:8dvh;height:auto;border:0px solid red;position:absolute;display:block;left:2.5dvh;top:1dvh;cursor:pointer;z-index:10;}
		#btmlogotop img{width:100%;height:100%;}
		
		#valkommen{position:relative;display:block;width:80dvh;height:auto;margin:0;padding:0;padding-top:15dvh;}
		
		#pinkball3{display:block;position:absolute;height:8dvh;width:8dvh;background-color:#c43c6e;border-radius:10dvh;text-align:center;padding:4.5dvh 3dvh 1.5dvh 3dvh;margin-top:-25dvh;right:7dvh;font-size:2.2dvh;color:#fff;font-family: 'Source Sans Pro Semibold';line-height:1.3em;cursor:pointer;}
		#pinkball{display:block;position:absolute;height:8dvh;width:8dvh;background-image: linear-gradient(#c43c6e, #c96d7a);border-radius:10dvh;text-align:center;padding:3dvh 3dvh 3dvh 3dvh;margin-top:-25dvh;right:7dvh;font-size:2.2dvh;color:#fff;font-family: 'Source Sans Pro Semibold';line-height:1.3em;cursor:pointer;}
		#pinkball2{display:block;position:absolute;height:10dvh;width:10dvh;background-image: linear-gradient(#de7b17, #de7b17);border-radius:10dvh;text-align:center;padding:3dvh;margin-top:1.5dvh;right:-7dvh;font-size:2.2dvh;color:#fff;}
		
		#orangeballsvg{display:block;position:relative;float:right;height:18dvh;width:18dvh;margin:-10dvh -3dvh 0 0;}
		
		
		#rosaboard{display:block;position:relative;height:10dvh;background-color:#044548;padding-bottom:20dvh;
			background-image: url("../svg/boardrosa.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
			
		}
		#greenboard{display:block;position:relative;height:10dvh;padding-bottom:20dvh;
			background-image: url("../svg/boardgreen.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
			
		}
		#rosaboard2{display:block;position:relative;height:10dvh;background-color:#044548;padding-bottom:20dvh;
			background-image: url("../svg/boardrosa2.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
			
		}
		#orangeboard{display:block;position:relative;height:10dvh;background-color:#074d51;padding-bottom:20dvh;
			background-image: url("../svg/boardorange.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
			
		}
		#orangeboard2{display:block;position:relative;height:auto;background-color:#074d51;
			background-image: url("../svg/boardorange2.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
			
		}
		#orangeboard3{display:block;position:relative;height:auto;}
		.undremitt{border-top:3px solid #fff;display:block;position:relative;height:50dvh;width:80dvh;background-color:transparent;
			background-image: url("../svg/boardrosa.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
		}
		#installera{border:0px solid red;display:block;position:relative;width:48%;margin:0 0 0 12.5%;padding:2dvh 1dvh 0.5dvh 1dvh;background-color:#c43c6e;border-top-left-radius:4dvh;border-bottom-right-radius:4dvh;}
		#versions{border:0px solid red;display:block;position:relative;width:100%;margin:0;padding:0 0 0 0;}
		#mittknappBTM{border:0px solid red;width:30%;height:auto;background-color:#fff;position:relative;margin:0 3% 0 3%;cursor:pointer;border-radius: 0.25em;display:inline-block;margin:0 2%;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius:7px;
		}
		#mittknappBTM{border:0px solid red;width:30%;height:auto;background-color:#fff;position:relative;margin:0 3% 0 3%;cursor:pointer;border-radius: 0.25em;display:inline-block;margin:0 2%;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius:7px;
		}
		#mittknappBTM img{width:auto;height:auto;padding:5%;position:relative;display:block;margin:0 auto;border-radius:9px;}
		#mittknappBTM p{font-size:0.7em;text-align:right;margin:10px 5px 0 0;}
		
		
		#mittknappBTM2{border:px solid red;width:90%;height:auto;position:relative;margin:0 3% 0 3%;cursor:pointer;border-radius: 0.25em;display:inline-block;margin:0;}
		#mittknappBTM2 img{width:auto;height:auto;padding:0;position:relative;display:block;margin:0 auto;border-radius:9px;}
		#mittknappBTM2 p{font-size:0.9em;text-align:right;margin:10px 5px 0 0;}
		#howto1{border:1px solid blue;vertical-align:top;display:inline-block;width:30%;border-radius:9px;margin:0;}
		#howto2{border:0px solid green;vertical-align:top;display:inline-block;width:30%;border-radius:9px;margin:0;}
		#howto1 img{width:18dvh;height:auto;margin:0;padding:3%;}
		#howto2 img{width:18dvh;height:auto;margin:0;padding:3%;}
		
		#version1{border:0px solid blue;vertical-align:top;display:inline-block;width:30%;border-radius:9px;margin:0;}
		#version2{border:0px solid green;vertical-align:top;display:inline-block;width:90%;border-radius:9px;margin:0;}
		#version3{border:0px solid red;vertical-align:top;display:inline-block;width:30%;border-radius:9px;margin:0;margin-top:-7dvh;}
		#version3 img{width:14dvh;height:auto;margin:0;padding:3%;float:right;}
		
		.version{font-family: 'Source Sans Pro Semibold';font-size:1.3dvh;text-transform:uppercase;text-align:right;position:relative;display:block;margin:0;}
		
		#starttext {height:0dvh;padding:0;margin:0;}
		#starttext img{width:15dvh;height:auto;position:absolute;display:block;float:left;left:50%;top:-12dvh;margin-left:-21dvh;}
		.brodtext{display:block;position:relative;width:75%;margin:0 auto 0 auto;padding:2dvh 0 4.5dvh 0;}
		.brodtext p.rub{font-family: 'Source Sans Pro Light';margin:1dvh 0 0 0;font-size:6dvh;line-height:0.7;text-align:center;}
		.brodtext p.ruborange{font-family: 'Source Sans Pro Bold';color:#fff;margin:1dvh 0 1dvh 0;font-size:6dvh;line-height:1.0;text-align:left;}
		.brodtext p.rubmell{font-family: 'Source Sans Pro Bold';margin:3dvh 0 0 0;font-size:5dvh;}
		.brodtext p.rubmellinstall{font-family: 'Source Sans Pro Bold';margin:2dvh 0 0 0;font-size:2.5dvh;}
		.brodtext p{margin:0 0 0 0;font-size:2.2dvh;line-height:1.4;}
		.brodtext p span{font-family: 'Source Sans Pro Bold';}
		.brodtext p.tonknapp{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		.mittmitt .brodtext{display:block;position:relative;width:75%;margin:0 auto 0 auto;padding:2dvh 0 2dvh 0;}
		.mittmitt .brodtext a{color:#fd6f79;}
		.tonknapp{border-radius:5px;position:relative;display:block;width:100%;
			background-image: url("../svg/knappbakgron.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
		}
		
		.brodtext p.tonknapprosa{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		
		.tonknapprosa{border-radius:5px;position:relative;display:block;width:100%;
			background-image: url("../svg/knappbakrosa.svg");
			background-repeat:no-repeat;
			background-position: center center;
			background-size:cover;
			-o-background-size:cover;
			-moz-background-size:cover;
			-webkit-background-size:cover;
		}
		.undrevidare{border:0px solid blue;display:block;position:relative;height:auto;width:80dvh;padding:1dvh 0 4dvh 0;background-color:#044548;margin-top:0;}
		.brodtext a{color:#fff;text-decoration:none;}
		
		#mitt1 .brodtext p.starpunkt{margin:0.5dvh 0 0 0;}
		#mitt1 .brodtext p.starpunkt::before{content:url('../svg/star.svg');
		position:relative;
		display:inline-block;
		   margin:0 1dvh 0 0dvh;
		   width:2dvh;
		}
		#mitt1 .brodtext p.starpunkt i{font-size:0.7em;margin-left:3dvh;}
		
		#mitt1 .brodtext p.starpunkt{display:none;}
		#mitt1 .brodtext p.starpunkt{margin:0.5dvh 0 0 0;}
		#mitt1 .brodtext p.starpunkt::before{content:url('../svg/star.svg');
		position:relative;
		display:inline-block;
		   margin:0 1dvh 0 0dvh;
		   width:2dvh;
		}
		
		#regler{background-color:#074d51;width:80dvh;padding-top:19dvh;}
		#om{background-color:#074d51;width:80dvh;}
		#faq{background-color:#074d51;width:80dvh;}
		#kontakt{background-color:#074d51;width:80dvh;}
		
		#sidfot{color:#fff;background-color:#de7b17;}
		#sidfot .brodtext{margin:0 auto;padding:2dvh 0;width:85%;}
		
		.rutaopen{width:75%;border:0px solid yellow;display:block;margin:1dvh auto;}
		.rutaopenunder{width:100%;border:0px solid yellow;display:block;margin:1dvh auto;}
		.rutaclosedunder{width:100%;border:0px solid yellow;margin:1dvh auto;}
		.rutaopen .rutaclosedunder{display:block;}
		.rutaclosed .rutaclosedunder{display:none;}
		.rutaopen .rutaclosedunder .rutatextenunder{display:none;}
		.rutaopen .rutaopenunder .rutatextenunder{display:block;}
		.rutaopen .rutaclosedunder .rubmell{display:none;}
		.rutaopen .rutaopenunder .rubmell{display:block;}
		.rutaopen .rutaclosedunder .rutatextenpunkt{display:none;}
		.rutaopen .rutaopenunder .rutatextenpunkt{display:block;}
		.rutaopen .rutaclosedunder .minusminus{display:none;}
		.rutaopen .rutaopenunder .plusplus{display:none;}
		.rutaopen .rutaopenunder .minusminus{display:block;}
		.rutaopen .tonknapp1{margin-bottom:2dvh;}
		.rutaopen .tonknapp2{margin-bottom:2dvh;}
		.rutaopen .tonknapp3{margin-bottom:2dvh;}
		.rutaopen .tonknapp4{margin-bottom:2dvh;}
		.rutaopen .plus{display:none;}
		.rutaopen .rubmell{display:block;}
		.rutaopen .rutatexten{display:block;}
		.rutaopen .rutatextenpunkt{display:block;}
		.rutaopen .rutatextennummer1{display:block;}
		.rutaopen .rutatextennummer2{display:block;}
		.rutaopen .rutatextennummer3{display:block;}
		.rutaopen .rutatextensymbol1{display:block;}
		.rutaopen .rutatextensymbol2{display:block;}
		.rutaopen .rutatextensymbol3{display:block;}
		.rutaopen .rutatextensymbol4{display:block;}
		
		.rutaopen .rutaunderopen .rutatexten{display:block;}
		.rutaclosed .tonknapp3 {display:block;}
		.rutaclosed{width:75%;border:0px solid yellow;display:block;margin:1dvh auto;}
		.rutaclosed .minus{display:none;}
		.rutaclosed .rutaclosedunder .minusminus{display:none;}
		.rutaclosed .rubmell{display:none;}
		.rutaclosed .rutatexten{display:none;}
		.rutaclosed .rutatextenpunkt{display:none;}
		.rutaclosed .rutatextennummer1{display:none;}
		.rutaclosed .rutatextennummer2{display:none;}
		.rutaclosed .rutatextennummer3{display:none;}
		.rutaclosed .rutatextensymbol1{display:none;}
		.rutaclosed .rutatextensymbol2{display:none;}
		.rutaclosed .rutatextensymbol3{display:none;}
		.rutaclosed .rutatextensymbol4{display:none;}
		.tonknapp1{border-radius:5px;background-color:transparent;position:relative;display:block;width:95%;cursor:pointer;
			background-image: linear-gradient(to right, #c43c6e, #c96d7a);
		}
		.tonknapp2{border-radius:5px;background-color:transparent;position:relative;display:block;width:95%;
			background-image: linear-gradient(to right, #0b585c, #3d928f);
		}
		.tonknapp3{border-radius:5px;background-color:transparent;position:relative;display:block;width:75%;
			background-image: linear-gradient(to right, #0b585c, #3d928f);
		}
		.tonknapp4{border-radius:5px;background-color:transparent;position:relative;display:block;width:95%;
			background-image: linear-gradient(to right, #0b585c, #3d928f);
		}
		.rutatexten{border-radius:5px;position:relative;display:block;width:95%;margin:1dvh auto;}
		.brodtext p{font-size:2.0dvh;line-height:1.4;padding:0 1dvh 1dvh 1dvh;}
		.brodtext p.rubmell{font-family: 'Source Sans Pro Bold';margin:3dvh 0 0 0;line-height:1.0;font-size:2.5dvh;}
		.brodtext p.tonknapp1{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		.brodtext p.tonknapp2{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		.brodtext p.tonknapp3{font-family: 'Source Sans Pro Regular';font-style:italic;font-size:2dvh;padding:1dvh 1dvh 1dvh 1dvh;}
		.brodtext p.tonknapp4{font-family: 'Source Sans Pro Regular';font-style:italic;font-size:2dvh;padding:1dvh 1dvh 1dvh 1dvh;}
		.brodtext p.rutatextenpunkt{font-family: 'Source Sans Pro Regular';margin:0.2dvh 0 0 0;line-height:1.4;text-indent:-2dvh;margin-left:1dvh;padding:0 0 0 3dvh;}
		.brodtext p.rutatextenpunkt::before{content:url('../svg/star.svg');
		position:relative;
		display:inline-block;
		   margin:0 -1dvh 0 1dvh;
		   width:2dvh;
		}
		.mittmitt .rutaclosed{margin:0 auto;width:100%;}
		.mittmitt .rutaopen{margin:0 auto;width:100%;}

		.brodtext p.rutatextennummer1{font-family: 'Source Sans Pro Regular';margin:0.2dvh 0 0 0;line-height:1.4;text-indent:-2dvh;margin-left:1dvh;padding:0 0 0 3dvh;}
		.brodtext p.rutatextennummer1::before{content:url('../svg/nr1.svg');
		position:relative;
		display:inline-block;
		   margin:0 -1dvh 0 1dvh;
		   width:1.9dvh;
		}
		.brodtext p.rutatextennummer2{font-family: 'Source Sans Pro Regular';margin:0.2dvh 0 0 0;line-height:1.4;text-indent:-2dvh;margin-left:1dvh;padding:0 0 0 3dvh;}
		.brodtext p.rutatextennummer2::before{content:url('../svg/nr2.svg');
		position:relative;
		display:inline-block;
		   margin:0 -1dvh 0 1dvh;
		   width:1.9dvh;
		}
		.brodtext p.rutatextennummer3{font-family: 'Source Sans Pro Regular';margin:0.2dvh 0 0 0;line-height:1.4;text-indent:-2dvh;margin-left:1dvh;padding:0 0 0 3dvh;}
		.brodtext p.rutatextennummer3::before{content:url('../svg/nr3.svg');
		position:relative;
		display:inline-block;
		   margin:0 -1dvh 0 1dvh;
		   width:1.9dvh;
		}
		.brodtext p.rutatextensymbol1{margin:0 0 1dvh 0;line-height:1.4;text-indent:0dvh;margin-left:1dvh;padding:0 0 0 0;}
		.brodtext p.rutatextensymbol1::before{content:url('../svg/sno.svg');
		position:relative;
		border:0px solid white;
		float:left;
		display:inline-block;
		vertical-align:top;
		   margin:0 2dvh 0 0;
		   width:5dvh;
		}
		.brodtext p.rutatextensymbol2{margin:0 0 1dvh 0;line-height:1.4;text-indent:0dvh;margin-left:1dvh;padding:0 0 0 0;}
		.brodtext p.rutatextensymbol2::before{content:url('../svg/beatcoin.svg');
		position:relative;
		border:0px solid white;
		float:left;
		display:inline-block;
		vertical-align:top;
		   margin:0 2dvh 0 0;
		   width:5dvh;
		}
		.brodtext p.rutatextensymbol3{margin:0 0 1dvh 0;line-height:1.4;text-indent:0dvh;margin-left:1dvh;padding:0 0 0 0;}
		.brodtext p.rutatextensymbol3::before{content:url('../svg/plocka.svg');
		position:relative;
		border:0px solid white;
		float:left;
		display:inline-block;
		vertical-align:top;
		   margin:0 2dvh 0 0;
		   width:5dvh;
		}
		.brodtext p.rutatextensymbol4{margin:0 0 3dvh 0;line-height:1.4;text-indent:0dvh;margin-left:1dvh;padding:0 0 0 0;}
		.brodtext p.rutatextensymbol4::before{content:url('../svg/gissa.svg');
		position:relative;
		border:0px solid white;
		float:left;
		display:inline-block;
		vertical-align:top;
		   margin:0 2dvh 0 0;
		   width:5dvh;
		}
		.brodtext p span {font-family: 'Source Sans Pro Semibold';font-style:normal;float:right;font-size:4dvh;margin-top:-1.5dvh;margin-right:1dvh;cursor:pointer;}
		.brodtext p.rutatexten span.fetad{font-family: 'Source Sans Pro Bold';float:none;font-size:2.0dvh;margin:0;}
		.brodtext p.rutatextenpunkt span.fetad{font-family: 'Source Sans Pro Bold';float:none;font-size:2.0dvh;margin:0;}
		.brodtext p span.fettad{font-family: 'Source Sans Pro Bold';float:none;font-size:2.0dvh;margin:0;}
		.rutaclosed p.tonknapp1{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		.rutaclosed p.tonknapp2{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		.rutaclosed p.tonknapp3{font-family: 'Source Sans Pro Regular';font-style:italic;font-size:2dvh;padding:1dvh;}
		.rutaclosed p.tonknapp4{font-family: 'Source Sans Pro Regular';font-style:italic;font-size:2dvh;padding:1dvh;}
		.rutaclosed p span {font-family: 'Source Sans Pro Semibold';font-style:normal;float:right;font-size:4dvh;margin-top:-1.5dvh;margin-right:1dvh;cursor:pointer;}
		.rutaclosedrosa p.tonknapprosa{font-family: 'Source Sans Pro Regular';font-size:2dvh;padding:1dvh;}
		.rutaclosedrosa p span {font-family: 'Source Sans Pro Semibold';font-style:normal;float:right;font-size:4dvh;margin-top:-1.5dvh;margin-right:1dvh;cursor:pointer;}

		.undremitt p{z-index:10;position:absolute;text-align:center;width:100%;display:none;}
		

		.off{display:none;}
		.on{display:block;}

		
		
		.example {
		  color: #fff;background: #c64777;opacity:0;
		}
		.topexemple {
		  color: #fff;background: none;border-top:1px solid pink;
		}
		
		#media{display:none;position:fixed;top:0;left:0;border:1px solid red;width:5vw;height:5vw;margin:0 0;z-index:100;
			background-repeat:no-repeat;
			background-position: center center;
			background-size:contain;
			-o-background-size:contain;
			-moz-background-size:contain;
			-webkit-background-size:contain;
		}
		/* Extra small devices (phones, 600px and down) */
        @media only screen and (orientation: portrait) and (min-width: 100px) and (max-width: 600px){
 			#snurra{display:none;}
			#media{background-image: url("../svg/pad_port_btm.svg");}
	  		#pinkball2{height:12dvw;width:12dvw;padding:3dvw;margin-top:1.5dvw;right:-7dvw;font-size:2.4dvw;color:#fff;}

			#huvud{width:100vw;}
			td#mittvy{width:100vw;}
			td#kontakt{width:100vw;}
			td#regler{width:100vw;}
			td#om{width:100vw;}
			td#faq{width:100vw;}
			td#sidfot{width:100vw;}
			#valkommen{width:100vw;}
			#rosaboard{width:100vw;}
			#rosaboard2{width:100vw;}
			.ovremitt{width:100vw;}
			.mittmitt{width:100vw;}
			.undremitt{width:100vw;}
			
			.brodtext{width:80%;}
			.rutaopen{width:80%;}
			.rutaclosed{width:80%;}
			.tonknapp3{width:80%;}
			
			.brodtext p.rub{font-size:4.5dvh;}
			.brodtext p.ruborange{font-size:4.5dvh;}
			.brodtext p.rubmell{font-size:4dvh;}
			.brodtext p{font-size:1.6dvh;}
			.brodtext p span{}
			.brodtext p.tonknapp{font-size:1.5dvh;}
		}

		/* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (orientation: landscape) and (min-width: 100px) and (max-width: 600px){
    		  #snurra{display:none;}
	  		#version3 img{width:10dvh;height:auto;margin:0;padding:3%;float:right;}
			  
		}

		/* Medium devices (landscape tablets, 768px and up) */
        @media only screen and (orientation: portrait) and (min-width: 601px) and (max-width: 900px){
    		  #snurra{display:none;}
			
  			#huvud{width:100vw;}
  			td#mittvy{width:100vw;}
  			#valkommen{width:100vw;}
  			#rosaboard{width:100vw;}
  			#rosaboard2{width:100vw;}
  			.ovremitt{width:100vw;}
  			.mittmitt{width:100vw;}
  			.undremitt{width:100vw;}
			
  			.brodtext{width:80%;}
  			.rutaopen{width:90%;}
  			.rutaclosed{width:90%;}
  			.tonknapp3{width:90%;}
			
  			.brodtext p.rub{font-size:4.5dvh;}
  			.brodtext p.ruborange{font-size:7dvh;}
  			.brodtext p.rubmell{font-size:4dvh;}
  			.brodtext p{font-size:2.2dvh;}
  			.brodtext p span{}
  			.brodtext p.tonknapp{font-size:2dvh;}
		} 

		/* Large devices (laptops/desktops, 992px and up) */
        @media only screen and (orientation: landscape) and (min-width: 601px) and (max-width: 900px){
    		  #snurra{display:none;}
		#media{background-image: url("../svg/pad_land.svg");}
  		#pinkball2{height:10dvw;width:10dvw;padding:3dvw;margin-top:1.5dvw;right:-7dvw;font-size:2.2dvw;color:#fff;}
		  
		} 

		/* Extra large devices (large laptops and desktops, 1200px and up) */
        @media only screen and (min-width: 901px) and (max-width: 1200px){
    		  #snurra{display:none;}
			  #media{background-image: url("../svg/screen_smal.svg");}
		  
		}
        @media only screen and (min-width: 1201px) and (max-width: 1600px){
    		  #snurra{display:none;}
			  #media{background-image: url("../svg/screen_med.svg");}
	  		#pinkball2{height:10dvh;width:10dvh;padding:3dvh;margin-top:1.5dvh;right:-7dvh;font-size:2.2dvh;color:#fff;}
			
		}
        @media only screen and (min-width: 1601px){
			#snurra{display:none;}
			#media{background-image: url("../svg/screen_big.svg");}
		}
        @media only screen and (orientation: portrait) and (max-device-width: 1601px){
			#snurra{display:none;}
			#media{background-image: url("../svg/mob_port_btm.svg");}
			
			#huvud{width:100vw;}
			td#mittvy{width:100vw;}
			#valkommen{width:100vw;}
			#rosaboard{width:100vw;}
			#rosaboard2{width:100vw;}
			.ovremitt{width:100vw;}
			.mittmitt{width:100vw;}
			.undremitt{width:100vw;}
			
			.brodtext{width:80%;}
			.rutaopen{width:90%;}
			.rutaclosed{width:90%;}
			.tonknapp3{width:90%;}
			
			.brodtext p.rub{font-size:4.5vh;}
			.brodtext p.ruborange{font-size:4.5vh;}
			.brodtext p.rubmell{font-size:4vh;}
			.brodtext p{font-size:2vh;}
			.brodtext p span{}
			.brodtext p.tonknapp{font-size:2vh;}
	  		#version3 img{width:9dvh;height:auto;margin:0;padding:3%;float:right;}

        }
        @media only screen and (orientation: landscape) and (max-device-width: 1601px){
			#snurra{display:block;}
			#media{background-image: url("../svg/mob_land.svg");}
			table{display:none;}
        }