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

	#one .slideContent li {
		width: 350px;
	}
	
	#imageBrain {
		background-image: url("http://www.heart.se/pagesCSS3/images/brain3.png");
		background-repeat: no-repeat;
		height: 350px;
		width: 350px;
		position: absolute;
		top: 150px;
		left: 200px;
	}
	
	/*---- Slider -----------------------------------------*/
 
	.slider1 {
		position: absolute;
		top: 0px;
		left: 167px;
		height: 450px;
	}
	.slider1 li {
		list-style: none;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 470px;
	}
	.slideContent {
		position: relative;
		top: 60px;
		width: 370px;
		height: 450px;
	}
	.slideContent li {
		position: relative;
		top: 20px;
		left: 2px;
		list-style-type: disc;
		margin-left: 15px;
		margin-bottom: 8px;
	}
	.slider1 input {
	   display: none; 
	}
	.slider1 label {
		background-color: #FFF;
		border: .2em solid transparent;
		bottom: .5em;
		border-radius: 100%;
		cursor: pointer;
		display: block;
		height: .5em;
		left: 24em;
		opacity: 0;
		position: absolute;
		transition: .25s;
		width: .5em;
		visibility: hidden;
		z-index: 10;
		top: 5px;
	}
	.slider1 label:after {
		border-radius: 100%;
		bottom: -.2em;
		content: '';
		left: -.2em;
		position: absolute;
		right: -.2em;
		top: -.2em;
	}
	.slider1:hover label {
		opacity: 1;
		visibility: visible;
	}
	.slider1 input:checked + label {
		background-color: #000;
		top: 5px;
	}
	.slider1:hover li:nth-child(1) label {
		left: .5em;
		top: 5px;
	}
	.slider1:hover li:nth-child(2) label {
		left: 2em;
		top: 5px;
	}
	.slider1:hover li:nth-child(3) label {
		left: 3.5em;
		top: 5px;
	}
	.slider1:hover li:nth-child(4) label {
		left: 5em;
		top: 5px;
	}
	.slider1:hover li:nth-child(5) label {
		left: 6.5em;
		top: 5px;
	}
	.slider1 .slideContent {
		opacity: 0;
		transition: .25s;
		visibility: hidden;
	}
	.slider1 li input:checked ~ .slideContent {
		opacity: 1;
		visibility: visible;
		z-index: 10;
	}

/*---- Slut Slider -----------------------------------------*/
	
	#imageBrain {
		background-image: url("http://www.heart.se/pagesCSS3/images/brain3.png");
		background-repeat: no-repeat;
		height: 350px;
		width: 350px;
		position: absolute;
		top: 150px;
		left: 200px;
	}
	
	.text_1_2_1 {
		position: absolute;
		top: 70px;
		left: 110px;
	}
	.text_1_2_2 {
		position: absolute;
		top: 330px;
		left: 20px;
	}
	.text_1_2_3 {
		position: absolute;
		top: 330px;
		left: 220px;
	}
	.vitCircle1 {
		position: absolute;
		top: 100px;
		left: 130px;
	  	border-radius: 50%;
	  	width: 150px; /* width and height can be anything, as long as they're equal */
	  	height: 150px;
	  	background: #FFF;
		opacity: 0.2; 
	}
	.vitCircle2 {
		position: absolute;
		top: 170px;
		left: 80px;
	  	border-radius: 50%;
	  	width: 150px; /* width and height can be anything, as long as they're equal */
	  	height: 150px;
	  	background: #FFF;
		opacity: 0.6;
		opacity: 0.2; 
	}
	.vitCircle3 {
		position: absolute;
		top: 170px;
		left: 180px;
	  	border-radius: 50%;
	  	width: 150px; /* width and height can be anything, as long as they're equal */
	  	height: 150px;
	  	background: #FFF;
		opacity: 0.2; 
	}
	.spalt1 {
		position: absolute;
		top: 30px;
		left: 0px;
		width:200px;
	}
	.spalt2 {
		position: absolute;
		top: 30px;
		left: 220px;
		width:200px;
	}
	/* create an arrow that points up */
	.arrowUp {
		position: absolute;
		top: 150px;
		left: 50px;
		width:0px; 
		height:0px; 
		border-left:75px solid transparent;  /* left arrow slant */
		border-right:75px solid transparent; /* right arrow slant */
		border-bottom:150px solid #FFF; /* bottom, add background color here */
		font-size:0px;
		line-height:0px;
		opacity: 0.5;
	}
	.txt_1_3_1 {
		position: absolute;
		top: 120px;
		left: 30px;
		color: #000;
		font-size: 1.2em;
	}
	.txt_1_3_2 {
		position: absolute;
		top: 210px;
		left: 0px;
		color: #000;
	}
	.txt_1_3_3 {
		position: absolute;
		top: 210px;
		left: 180px;
		color: #000;
	}
	.txt_1_3_4 {
		position: absolute;
		top: 310px;
		left: 40px;
		color: #000;
	}
	.bg_1_3_5 {
		position: absolute;
		top: 30px;
		left: 320px;
		width: 160px;
		height: 210px;
		background-color: #FFF;
		opacity: 0.7;
		-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
		-moz-border-radius: 15px; /* FF1-3.6 */
		border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
	}
	.txt_1_3_5 {
		color: #000;
		margin: 10px;
		opacity: 1.0;
		z-index: 11;
	}
	.bg_1_3_6 {
		position: absolute;
		top: 250px;
		left: 320px;
		width: 160px;
		height: 210px;
		background-color: #FFF;
		opacity: 0.7;
		-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
		-moz-border-radius: 15px; /* FF1-3.6 */
		border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
	}
	.txt_1_3_6 {
		color: #000;
		margin: 10px;
		opacity: 1.0;
		z-index: 11;
	}
	#content_1_4 {
		position: relative;
		top: 30px;
	}