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

body,td,th {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 110%;
	line-height:170%;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
	color:#555;
}
	
h1 {
	font-size: 200%;
	line-height:120%;
}

a.tillbaka{
	font-size:100%!important;
	margin-top:30px;
	display:block;
}
	.navwrapper {
width:100%;
		
		background-color:#31b6bc;
		color:white;	
		height:50px;
}
.knappar{
	width:100%;
	float:left;
	text-align:center;
	margin-top:40px;
	display:block;
	margin-bottom:40px;
}

		.navwrapper2 {
width:1200px;

			margin-left:auto;
			margin-right:auto;

}

img.takeda{
	width:70px;
	height:auto;
	vertical-align:middle;
	margin-right:10px;
	margin-bottom:5px;

}

.takedatext{
	display:block;
	line-height:110%;
	margin-top:10px;

}

		.logon {
	width:40%;
float:left;
				 background-image:url(fyra_bokstaver.png);
background-position:15px 7px;
background-repeat:no-repeat; 
			height:40px;
}

	
		.navigation {
	
	width:60%;
			float:right;
	text-align:right;
			padding-top:13px;

}

		.navigation a{
color:white;
			text-decoration:none;
			margin-left:50px;
}
		.navigation a:hover{
text-decoration:underline;
	  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.sub.active, a.sub.active2{
	text-decoration:none!important;
	
		background-image:url(sida.png);
	padding-left:45px;
	margin-left:-45px;
	background-size: auto 30px;
	background-repeat: no-repeat;
}


a.sub.active{
	
		background-image:url(sida.png);
}

a.sub.active2{
	
		background-image:url(sida2.png);
}

a.link1.active, a.link2.active, a.link3.active, a.link4.active{
text-decoration:underline;
}

a.link1, a.link2, a.link3, a.link4{

background-position:left 0px;
background-repeat:no-repeat; 	
	padding-left:28px;
				
			padding-bottom:5px;
}

a.link1:hover, a.link2:hover, a.link3:hover, a.link4:hover{

}

a.link1{
background-image:url(nav1.png);
}

a.link2{
background-image:url(nav2.png);
}

a.link3{
background-image:url(nav3.png);
}

a.link4{
background-image:url(nav4.png);
}
.adressen{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	font-size:70%;
	margin-bottom:10px;
	float:left;
	text-align: center;
}

.adressen a{
color:#555;
}

.adressen2{
	width:30%;
	float:right;
	text-align: right;
	padding-right:2%;
}

	.contentwrapper {
width:100%;
height: 90vh;
}

	.contentwrapper100 {
height: 100%;
}


.contentwrapper.test{


		display:inline-block;
				animation-name: examplefade; 
    animation-duration: 2s;
			animation-timing-function: ease-in-out;
		
}

.mittest{
	float:left;
	width:50%;
}
	.contentwrapper.test{
		background-color:#20b6ba;
				color:white;
		
}

	.contentwrapper.test.ljus{
		background-color:#e6f4f4;
				color:#555;
		
}

	.contentwrapper.test.ljus a{
				color:#555;
		
}

.bildtest{
	width:25%;
	float:left;
}

img.dammsugare, img.lista, img.moln, img.hjarta{
	width:auto;
	display:block;
}

img.dammsugare{
margin-top:-50px;
	margin-left:5%;
	height:250px;
}

img.lista{
margin-top:10px;
	margin-bottom:10px;
	margin-right:10%;
	height:180px;
	float:right;
}

img.moln{
margin-top:40px;
	margin-left:20%;
		height:230px;
}

img.hjarta{
margin-top:100px;
	margin-right:10%;
	float:right;
height:120px;
}

		.subcontent3.test{
			
width:100%;
			max-width:500px;
padding-top:5%;
			padding-bottom:5%;
}


		.subcontent3.test a{
text-decoration:none;
}

.contentwrapper.test a{
	color:white;
}

.contentwrapper.start, .contentwrapper.bla, .contentwrapper.bla2, .contentwrapper.test{
height: 100%;
}


		.filmwrapper, .contentwrapper2, .contentwrapper3, .contentwrapper4, .contentwrapper1, .contentwrapper_tom {
		width:1200px;

			margin-left:auto;
			margin-right:auto;
position: relative;
			background-repeat:no-repeat; 
}
.contentwrapper1 {
	background-image:url(bakgrund_bla2.png);

				animation-name: examplefade; 
    animation-duration: 2s;
			animation-timing-function: ease-in-out;
}
.contentwrapper2 {
				 background-image:url(bakgrund_undersida1.png);
				animation-name: examplefade;
    animation-duration: 2s;
			animation-timing-function: ease-in-out;
}
.contentwrapper3 {
					animation-name: examplefade;
    animation-duration: 2s;
			animation-timing-function: ease-in-out;

}

.contentwrapper4 {

	background-position:center center;
					animation-name: examplefade;
    animation-duration: 2s;
			animation-timing-function: ease-in-out;

}

.contentwrapper_tom {
text-align:center;
				animation-name: examplefade; 
    animation-duration: 2s;
			animation-timing-function: ease-in-out;
}

		.filmwrapper video{
			width: 100%;
height: 100%;
display: inline;
object-fit: cover;
}

		.startcontent {
			color:#31b6bc;
	
			font-size: 130%;
position: absolute;
z-index: 99999999999;
top: 0;
left: 0;
width: 50%;
			padding-left:5%;
			padding-top:3%;
			
			animation-name: examplefade;
    animation-duration: 2s;
			animation-timing-function: ease-in-out;
		
}

		.startcontent h1{
			margin-bottom:15px;
		
}

.startmini{
	font-size:65%;
	line-height:120%;
	font-weight:bold;
}

		.subcontent,  .subcontent2,  .subcontent3 {
			font-size: 140%;
	margin-left:auto;
			margin-right:auto;
width: 50%;
			padding-top:15%;
			text-align:center;
animation-name: examplefade;
    animation-duration: 2s;
			animation-timing-function: ease-in-out;
}

		.subcontent.wide{
			
width: 45%;
			padding-top:5%;
		
}


		.subcontent.wide.bredd{
			
width: 55%;
		
}



		.subcontent2.wide{
			
width: 65%;
			padding-top:5%;
				padding-bottom:5%;

}

		.subcontent3.wide{
			
width: 50%;
			padding-top:5%;
				padding-bottom:5%;

}


.contentwrapper4 .subcontent h1, .contentwrapper4 .subcontent a{
			color:#9277af;
}

		.subcontent h1{
			font-size:250%;
			color:#ed4d5d;
}

		.subcontent2 h1{
	font-size:160%;
			color:#20b6ba;
			margin-top:-10px;
}


		.subcontent a{
			color:#ed4d5d;
}



		.subcontent_left, .subcontent_right {
float:left;
			padding-top:7%;
			margin-bottom:30px;

}

.subcontent_right.hjalp {

			padding-top:10%;
		

}

		.subcontent_left {
text-align:center;
			color:#ed4d5d;
			width: 38%;
			margin-right:8%;
}

		.subcontent_left.hjalp h2 {
font-size:280%;
			line-height:120%;
}

		.subcontent_right.hjalp h1 {
font-size:160%;
			padding-top:10px;
			color:#ed4d5d;
}

		.subcontent_right {
font-size:140%;
			width: 45%;
						animation-name: example;
    animation-duration: 2s;
			animation-timing-function: ease-in-out;

}


@keyframes example {
    from {
		opacity:0;
		transform: rotateY(330deg);
		margin-left:-5%;
	}
    to { 
		opacity:1;
		transform: rotateY(360deg);
		margin-left:0%;
	}
}

@keyframes examplefade {
    from {
		opacity:0;
	
	}
    to { 
		opacity:1;
		
	}
}


body#boken .subcontent_right h2, body#boken .subcontent_left h1, body#boken .subcontent_right strong, body#boken .subcontent_left a, .bokruta{
color:#31b6bc;
}

body#boken .subcontent_right {
width:53%;
	padding-top:5%;
	line-height:135%;
}

body#boken .subcontent_right h2{
font-size:170%;
}



.bokruta{
padding: 8% 15% 13% 15%;
float: left;
clear: both;
text-align: center;
font-weight: bold;
font-size: 160%;
line-height: 140%;
letter-spacing: 2px;
/* width: 95%; */
/* margin-left: -15%; */
background-size: contain;
background-repeat: no-repeat;
margin-top: 50px;

}

.bokruta.nr1{
	background-image:url(bakgrund_boken1.png);
}
.bokruta.nr2{
	background-image:url(bakgrund_boken2.png);
}
.bokruta.nr3{
	background-image:url(bakgrund_boken3.png);
}
.bokruta.nr4{
	background-image:url(bakgrund_boken4.png);
}

.bokruta.nr5{
	background-image:url(bakgrund_boken5.png);

}

		.subcontent_right h2{
font-size:140%;
			line-height:120%;
			color: #ed4d5d;
}

		.subcontent_left h1{
	font-size:290%;
			margin-top:10px;
}
.subcontent_left a{
	line-height:190%;
	font-weight:bold;
}

.subcontent_left a:hover, .subcontent h2 a:hover{
text-decoration:underline;

}

		.subcontent h2 a, .subcontent_left a{
			color:#ed4d5d;
			text-decoration:none;
			font-size:150%;
}

		.content, .botten {
				width:1200px;

	padding-top:15px;
				padding-bottom:15px;
				margin-left:auto;
			margin-right:auto;
	
}

		.botten {
				text-align:center;
font-size:70%;
			font-weight:bold;
			position: fixed;

			color:white;
			float:left;
}

sub{
	line-height:100%;
}


img.fullimage{
	width:100%;
}

img.arrow{
	margin-top:180px;
	width:10%;
}

img.arrow:hover{
	margin-top:170px;
	width:14%;
	transition: all 0.2s ease-in-out;
}

.download_left, .download_right{
	width:100%;
	float:left;
}

.download_right{
	margin-left:10%;
}

.download{
text-decoration:none;
	font-weight:bold;
	color: #ed4d5d;
	background-image:url(bakgrund_download.png);
	padding-left:30px;
	background-size: auto 20px;
	background-repeat: no-repeat;
	margin-top:10px;
	float:left;
	font-size: 80%;
}

.download:hover{
text-decoration:underline;
}

.upp{display:none;}

a.knapp{
	width:230px;
margin-left:60px;

}


a.knapp3{
	width:250px;
margin-left:100px;
	margin-top:30px;

}

a.knapp2{
	width:245px;
margin-left:100px;
	margin-top:30px;

}

a.knapp, a.knapp2, a.knapp3{

	background-image:url(knapp.png);
	background-repeat:no-repeat;
background-size: auto 100%;
	padding:15px;
	text-align:center;
	text-decoration:none;

font-weight:bold;
	font-size:100%;
	float:left;
}

a.knapp:hover, a.knapp2:hover, a.knapp3:hover{
color:black;
	transition: all 0.5s ease-in-out;
	text-decoration:none;
}