@font-face {
    font-family: 'aduma';
    src: url('../fonts/Aduma_webfont/aduma-regular-webfont.eot');
    src: url('../fonts/Aduma_webfont/aduma-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Aduma_webfont/aduma-regular-webfont.woff') format('woff'),
         url('../fonts/Aduma_webfont/aduma-regular-webfont.ttf') format('truetype'),
         url('../fonts/Aduma_webfont/aduma-regular-webfont.svg#adumamedium') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {   
    font-family: 'EzerBlock';
    src: url('../fonts/EzerBlock_webfont/ezer-block_oepro-regular-webfont.eot');
    src: url('../fonts/EzerBlock_webfont/aduma-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/EzerBlock_webfont/ezer-block_oepro-regular-webfont.woff') format('woff'),
         url('../fonts/EzerBlock_webfont/ezer-block_oepro-regular-webfont.ttf') format('truetype'),
         url('../fonts/EzerBlock_webfont/ezer-block_oepro-regular-webfont') format('svg');
    font-weight: 300;
    font-style: normal;
}

* {
	margin:0;
	padding:0;	
}
header,nav,article,footer,aside,main,section{
	display:block;
}
ul,li{
	text-decoration: none;
	list-style-type: none;
}
a{
	text-decoration: none;
	color:black;
}
a:visited,a:active,a:after{
		color:black;
}

html{
  height: 100%;
}
body {
  min-height: 100%;
  overflow:hidden;
}

#wrapper{
	height:768px;
	width:100%;
	display:block;
	margin:0 auto;
}
#scene{
}
nav{
	height:711px;
	width:91px;
	top: 10%;
	right: 0%;
	position:fixed;
}
aside{
	height:700px;
	width:180px;
	position:fixed;
	top: 7.2%;
	left:0%;
	display:none;
}
aside div{
	position: absolute;
	top: 52%;
	left: 5%;
	height: 165px;
	width: 167px;
	background: url("../images/Frame/PensionBag.png") no-repeat center 50%;
}
header{
	height: 7%;
	width: 100%;
    top:0%;
    left:0%;
	position:fixed;
	z-index: 10;
	padding-top: 20px;
	padding-left: 20px;
}
header a{
	margin-right: 12px;
	display: inline-block;
	position: relative;
	height: 40px;
	width: 40px;
}
#facebook{
	background: url("../images/Frame/Social_Facebook.png") no-repeat;
}
#facebook:hover{
	background-image: url("../images/Frame/Social_Facebook_S.png");
}
#twitter{
	background:url("../images/Frame/Social_Twitter.png") no-repeat;
}
#twitter:hover{
	background:url("../images/Frame/Social_Twitter_S.png") no-repeat;
}
#mail{
	background:url("../images/Frame/Social_Mail.png") no-repeat;
}
#mail:hover{
	background:url("../images/Frame/Social_Mail_S.png") no-repeat;
}
#about{
	position: fixed;
	font-family: EzerBlock,arial;
	font-size: 16px;
	color: #FFFFFF;
	top: 5%;
	left: 16%;
}
main{
	height:100%;
	width:100%;
}

.center{
	position:relative;
	height:660px;
	width:1280px;
	margin: 0 auto;
}
/* --------sec 0 --------------------------------------------------------------------*/
#sec0{
	background: #dddddd url("../images/Screen_0/opening.png") no-repeat 50%;
	background-size: 50%;
	height:100vh;
	width:100%;
}

/* --------sec 1 --------------------------------------------------------------------*/

#sec1{
	background-color: #84c560;
	position:relative;
	height:100vh;
	width:100%;
}

#sec1 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}

#user{
	position:relative;
	top:20%;
	left:25%;
}
#male{
	position:relative;
	top:-20%;
	left:65%;
	outline: 0;
}
#female{
	position:relative;
	top:13%;
	left:59.3%;
	outline: 0;
}

#slider {
 border:none;
 position:relative;
 top:44%;
 left:-170%;
 height:100px;
 width:30px;
 padding: 0.5em; 
 background: url("../images/Screen 1/Age_Button_None.png") no-repeat 100%;
}

#slider_wrapper{
	position:absolute;
	top:24%;
	left:26%;
	height:400px;
	width:10px;
	background: url("../images/Screen 1/Age_line_None.png") no-repeat 100%;
}

#slider_num{
	margin-top:140%;
	margin-left:27%;
	color:#FFFFFF;
	display:none;
}

#or{
	position:absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 58.5%;
	left: 66.8%;
	font-weight: lighter;
}

/* --------sec 2 --------------------------------------------------------------------*/

#sec2{	
	position:relative;
	background:#4a9e69;
	height:100vh;
	width:100%;
}
#sec2 img:nth-child(1){
	margin-top:5%;
	margin-left:17%;
	cursor: pointer;
}
#sec2 img:nth-child(2){
	margin-top:5%;
	margin-left:21%;
	cursor: pointer;
}

#sec2 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}
#sec2_info{
	position:absolute;
	top:15%;
	left:3%;
	width:245px;
	height:277px;
	background: url("../images/Screen 2/info.png") no-repeat ;
	background-size: 80%; 
	display:none;
}	
#gift{
	position:absolute;
	top:77%;
	left:0.7%;
	width:161px;
	height:103px;
	background-image: url("../images/Screen 2/Gift_Bottom.png");
	z-index:99;
	display:none;
}

#gift_top{
	position:absolute;
	top:63.35%;
	left:0.4%;
	width:169px;
	height:85px;
	background-image: url("../images/Screen 2/Gift_Top.png");
	z-index:99;
	display:none;
}

/* --------sec 3 --------------------------------------------------------------------*/

#sec3{
	background:#3a5f8d;
	height:100vh;
	width:100%;
	position: relative;
}
#sec3 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}
#paycheck{
	position: relative;
	width:794px;
	height:347px;
	margin: auto;
	top: 22%;
}
#paycheck>img {
	position: absolute;
	max-width:100%;
	max-height:100%;
}
#check {
	position: absolute;
	top: 41%;
	left: 63%;
	background-color:rgba(0, 0, 0, 0);
 	color: #000000;
    border: none;
    outline:none;
    height:100px;
    transition:height 1s;
    -webkit-transition:height 1s;
    font-size:24px; 
    text-align: center;
    font-family: aduma;
    line-height:35px;
}
#sec3 p{
	position: absolute;
	top: 85%;
	left: 29%;
	font-family: EzerBlock,arial;
	font-size: 26px;
	color: #FFFFFF;
}
#check::-webkit-input-placeholder { /* WebKit browsers */
    color: #000000;
}
#check::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color: #000000;
}
#check::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color: #000000;
}
#check::-ms-input-placeholder { /* Internet Explorer 10+ */
	   color: #000000;
}

/* --------sec 4 --------------------------------------------------------------------*/

#sec4{
	background: #3a5f8d;
	height:100vh;
	width:100%;
	position:relative;
}
#little_check {
	display: none;
	position: absolute;
	background: url("../images/Screen_4/half_little_check.png") no-repeat;
	background-size: 80% 80%;
	width: 485px;
	height: 117px;
	left: 34%;
	top: -40%;
}
#check_no_changed{
/*	background: url("../images/Screen_4/shekel.png") no-repeat 25% center;
	background-size: 6%;
*/	position: absolute;
	width: 140px;
	top: 11%;
	left: 50%;
	background-color:rgba(0, 0, 0, 0);
 	color: #000000;
    border: none;
    outline:none;
 	font-size:16px; 
	text-align:center;
    font-family: aduma;
}
#sec4 h1{
	position:absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 20px;
	right: 40px;
	font-weight: lighter;
}
#percentageButtons {
	position: relative;
	width: 60%;
	left: 20%;
	top: 35%; 
}
.perButton {	
	display:inline-block;
	height: 40%;
	width: 18%;
	margin-left: 7%;
	margin-right: 7%;
	text-align: center;
	font-family: aduma;
	font-size: 60px;
	color: #FFFFFF;	
	background: url("../images/Screen_4/Selection.png") no-repeat center top;
	background-size: 25%;
	border: none;
	outline: none;
}
#img_per{
	position: absolute;
	top: 57%;
	right: 8%;
}
#sec4 h4{ 
	position:absolute;
	font-family: EzerBlock,arial;
	font-size: 20px;
	color: #FFFFFF;
	top: 58%;
	right: 27%;
	font-weight: lighter;
}
#percentage_second{
	position: absolute;
	width: 50%;
	height: 24%;
	top: 72%;
	right: 35%;
	direction: rtl;
	visibility: hidden;
}
.text_sec4{
	color: #9eafc5;
	font: 44px aduma,Arial;
	display: inline-block;
}
#perMonth,#totalAmout{
 	background: none;
	direction: ltr;
	display: inline-block;
	border: none; 
	font: 44px aduma,Arial;
	color: #FFFFFF;
	outline: none;
	margin-right: 5px;
	margin-left: 15px;
}
#perMonth_in{
	display: none;
}
/* --------sec 5 --------------------------------------------------------------------*/
#sec5{	
	background:#ffbf47;
	height:100vh;
	width:100%;
}
#sec5 h1 {
	position:absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 40px;
	right: 40px;
	font-weight: lighter;
	outline: none;	
}
/* opening animation to sec 5 */

#envelope5_part{
	height: 520px; 
	width: 462px;
	position: relative;
	margin: auto;
}
#env_up{
	position: absolute;
	top: 27.2%; 	
	background: url("../images/Screen_5/env_up.png") no-repeat center;
	width: 455px;
	height: 303px;
	z-index: 1;
}
#env_down{
	position: absolute;
	bottom: 0%;
	background: url("../images/Screen_5/env_down.png") no-repeat center bottom;
	background-size: 100%;
	width: 455px;
	height: 303px;
	z-index: 3;
}
#little_check2 {
	display: none;
	position: absolute;
	background: url("../images/Screen_5/Salary.png") no-repeat;
	background-size: 90% 100%; 
	width: 448px;
	height: 195px;
	left: 26px;
	top: -15%;
	z-index: 2;	
}
#check_no_changed2{
	position: relative;
	width: 140px;
	top: 52%;
	left: 56%;
	background-color:rgba(0, 0, 0, 0);
 	color: #000000;
    border: none;
    outline:none;
 	font-size:16px; 
	text-align:center;
    font-family: aduma;
}
/* actually sec 5 */

#slider-wrapper5 {
	display: none;
	position: relative;
	width: 60%;
	margin: auto;
	height: 72%; 
	top: 0%;
	outline: none;
}
#slider5 {
	position: relative;
	height: 78%;
	width: 40%;
	left: 30%;
	top: 30%;
}
#button-previous {
	position: absolute;
	background: #ffbf47 url("../images/Screen_5/button-arrow-left.png") no-repeat;
	background-size: 75% 75%; 
	left: 15%;
	top: 52%;
	width: 82px;
	height: 82px;
}
#button-next {
	position: absolute;
	background: #ffbf47 url("../images/Screen_5/button-arrow-right.png") no-repeat;
	background-size: 75% 75%; 
	right: 15%;
	top: 52%;
	width: 82px;
	height: 82px;
}
#drag_env{
	position: absolute;
	top: 0%;
	left: 46%;
	background: url("../images/Screen_5/drag_env.png") no-repeat;
	background-size: 70%;
	margin: auto;
	height: 28%;
	width: 10%;
	z-index: 2;
}
.sp {
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: 100% 100%;	
	background-position: 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
.sp2 {
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: 100% 100%;	
	background-position: 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#Ayalon {background-image: url("../images/Screen_5/Box_Ayalon.png"); z-index: 1; }
#Ayalon2 {background-image: url("../images/Screen_5/Box_Ayalon2.png"); z-index: 3;}

#Klal {background-image: url("../images/Screen_5/Box_Klal.png") ; z-index: 1;}
#Klal2 {background-image: url("../images/Screen_5/Box_Klal2.png") ;z-index: 3;}

#Harel {background-image	: url("../images/Screen_5/Box_Harel.png"); z-index: 1;  }
#Harel2 {background-image: url("../images/Screen_5/Box_Harel2.png");	z-index: 3; }

#Menorah {background-image: url("../images/Screen_5/Box_Menorah.png");  z-index: 1;}
#Menorah2 {background-image: url("../images/Screen_5/Box_Menorah2.png"); z-index: 3;}

#Migdal {background-image: url("../images/Screen_5/Box_Migdal.png"); z-index: 1; }
#Migdal2 {background-image: url("../images/Screen_5/Box_Migdal2.png"); z-index: 3;}

#Phoenix {background-image: url("../images/Screen_5/Box_Phoenix.png"); z-index: 1;}
#Phoenix2 {background-image: url("../images/Screen_5/Box_Phoenix2.png");z-index: 3;}


/* --------sec 6 --------------------------------------------------------------------*/
#sec6{	
	background: #c73746;
	position:relative;
	height:100vh;
	width:100%;	
	/* div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … }) */
}

#sec6>div{
	background: #c73746 url("../images/Screen 6/sign_base.png") no-repeat 45.5% 97%;
}
#sec6 p{
	text-align: right;
	font-size:15px;
	padding-top:25px;
	padding-left:10px;
	padding-right:15px;
	font-family: EzerBlock;
}

.headerz{
	font-weight: 900;
	font-size:20pt;
	font-family: aduma;
}

#sec6 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}

#no_idea{
	position:absolute;
	left:20%;
	top:85%;
	margin-top:6%;
	z-index:0;
	height:0px;
	cursor: pointer;
}

#medium{
	position:absolute;
	left:33.5%;
	top:140%;
	z-index:1;
	height:0px;
	cursor: pointer;
}

#solid{
	position:absolute;
	left:45%;
	top:85%;
	z-index:2;
	height:0px;
	cursor: pointer;
}

#danger{
	position:absolute;
	right:27%;
	top:85%;
	z-index:0;
	height:0px;	
	cursor: pointer;
}

#p1{
	position:absolute;
	bottom:49%;
	right:83%;
	outline: 0;
	opacity:0;
	width:42px;
	height:42px;
	border: 0;
	button { outline: 0; }
}

#p2{
	position:absolute;
	bottom:105%;
	right:28%;
	outline: 0;
	opacity:0;
	width:42px;
	height:42px;
	border: 0;
	button { outline: 0; }
}
#p3{
	position:absolute;
	bottom:104%;
	right:62%;
	outline: 0;
	opacity:0;
	width:42px;
	height:42px;
	border: 0;
	button { outline: 0; }
}
#p4{
	position:absolute;
	bottom:88%;
	right:11%;
	outline: 0;
	opacity:0;
	width:42px;
	height:42px;
	border: 0;
	button { outline: 0; }
}
#sec6 input {
	background:url("../images/Screen 6/plus_normal.png")no-repeat center center;
	background-size:95%;
}
#sec6 input:hover{
	background:url("../images/Screen 6/plus_hover.png");
	background-size:100%;
}

#plus1 {
	position:absolute;
	top:10%;
	left:10%;
    width: 200px;
    height: 150px;
    background-color: rgba(153,35,47,0.5);
    display:none;
    z-index:1;
    color:#FFFFFF;
    border-radius:5px;
  }
#plus2{
	position:absolute;
	top:25%;
	left:35%;
	width: 200px;
	height: 150px;
	background-color: rgba(153,35,47,0.5);
	display:none;
	z-index:2;
	color:#FFFFFF;
	border-radius:5px;
	}
#plus3 {
	position:absolute;
	top:50%;
	left:56%;
	width: 200px;
	height: 150px;
	background-color: rgba(153,35,47,0.5);
	display:none;
	z-index:3;
	color:#FFFFFF;
	border-radius:5px;
	}
#plus4 {
	position:absolute;
	top:17%;
	left:70%;
	width: 200px;
	height: 150px;
	background-color: rgba(153,35,47,0.5);
	display:none;
	z-index:4;
	color:#FFFFFF;
	border-radius:5px;
	}

/* --------sec 7 --------------------------------------------------------------------*/

#sec7{	
	background: #3a5f8d;
	background-size: 55%;
	height:100vh;
	width:100%;
	position: relative;
}
#sec7>div{
	background: #3a5f8d url("../images/Screen_7/graph.png") no-repeat 45% 46%;
}

#sec7 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}
#sec7 article:nth-child(2){
	background: url("../images/Screen_7/info.png") no-repeat 45% top;
	background-size: 66%;
	position: absolute;
	width: 745px;
	height: 136px;
	top: 82%;
	right: 0%;
}
#sec7 article:nth-child(3){
	background: url("../images/Screen_7/mikra.png") no-repeat;
	background-size: 80%;
	position: absolute;
	width: 172px;
	height: 101px;
	top: 82%;
	left: 18%;
}
#sec7 article:nth-child(4){
	background: url("../images/Screen_7/line_per.png") no-repeat;
	background-size: 90%;
	position: absolute;
	width: 42%;
	height: 48%;
	top: 22%;
	left: 30%;
	z-index: 3;
	pointer-events: none;
}
#graph{
	position:absolute;
	width: 46%;
	height: 48%;
	top: 20%;
	left: 27%;
}
.column{
	display: inline-block;
	position: relative;
	width: 7%;
	margin-left: 7%;
	background: #ffc75f;
	top: 17%;
}
#KlalCol{      height: 81%;}
#MenorahCol{   height: 72%;}
#HarelCol{	   height: 79%;}
#MigdalCol{	   height: 69%;}
#AyalonCol{	   height: 56%;}
#PhoenixCol{   height: 50%;}

.activeCol{
	background: #E69400;
}

.bubble{
	position: absolute;
	display: none; 
	background: url("../images/Screen_7/bubble.png") no-repeat;
	background-size: 100%;
	position: absolute;
	width: 126px;
	height: 120px;
	top: 5%;
	font-family: EzerBlock,arial;
	font-size: 14px;
	color: #FFFFFF;
	text-align: right;
}
.bubbleFrame{
	position: relative;
	top: 10px;
	right: 10px;
	width: 100px;
	height: 100px;
}
.bubbleTitel{
	font-size: 16px;
	font-weight: bold;
}
#KlalCol_info{ left: 344px; }
#MenorahCol_info{left: 430px; }
#HarelCol_info{left: 516px; }
#MigdalCol_info {	left: 602px; }
#AyalonCol_info{left: 688px; }
#PhoenixCol_info{left: 774px; }

/* --------sec 8 --------------------------------------------------------------------*/

#sec8{
	background: #4a9e69	;
	height:100vh;
	width:100%;
}
#wrapper_sec8{
	height: 580px;
	width: 566px;
	position: relative;
	margin: auto;
	top : 2%;
}
#envelope_up {
	position: absolute;
	bottom: 5%;
	left: 0%;
	height: 508px;
	width: 566px;
	background: url("../images/Screen 8/Envelope_Back.png") no-repeat center;
	background-size: 100%;
	z-index: 1;
}
#envelope_down {
	position: absolute;
	bottom: 0%;
	left: 0%;
	height: 382px;
	width: 566px;
	background: url("../images/Screen 8/Envelope.png") no-repeat center bottom;
	background-size: 100%;
	z-index: 3;
}
#card {
	position: absolute;
	left: 0%;
	top: 18%; 	  /* 19.39%;  was 18 */
	height:	 380px;
	margin: auto; 
	width: 566px; 
	background: url("../images/Screen 8/Card.png") no-repeat center 50%;
	background-position-y: 0px;
	background-size: 90%;
	z-index: 2;
	transition-duration: 0.3s;
}
#card:hover {
	height: 520px;
	top: 1%;
}

/* --------sec 9 --------------------------------------------------------------------*/

#sec9{	
	background: #b5b5b5;
	position:relative;
	height:100vh;
	width:100%;
}
#sec9>div{
	background: #b5b5b5 url("../images/Screen 9/Man_Box_full.png") no-repeat 50% 79%;
}

#sec9 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}

#hair{
	width:613px;
	height:101px;
	position:absolute;
	top:15.3%;
	left:26.2%;
	background: transparent url("../images/Screen 9/Man_Box.png") no-repeat;
	display:none;
}

#crown{
	width:320px;
	height:219px;
	position:absolute;
	top:0%;
	left:45%;
	background: transparent url("../images/Screen 9/King.png") no-repeat;
	display:none;
}
#crown_info{
	width:320px;
	height:219px;
	position:absolute;
	top:15%;
	left:3%;
	background: transparent url("../images/Screen 9/crown_info.png") no-repeat;
	background-size: 80%; 
	display:none;
}
#pull_info{
	width:305px;
	height:316px;
	position:absolute;
	top:15%;
	left:3%;
	background: transparent url("../images/Screen 9/pull_info.png") no-repeat;
	background-size: 80%; 
	display:none;
}
#haircut_line{
	width:485px;
	height:2px;
	position:absolute;
	top:31%;
	left:29%;
	background: transparent url("../images/Screen 9/Line_Haircut.png") no-repeat;
	display:none;
}
#scissors{
	width:305px;
	height:316px;
	position:absolute;
	top:12%;
	left:66%;
	background: transparent url("../images/Screen 9/Scissors.png") no-repeat;
	display:none;
}

#B_no{
	position:absolute;
	top:50%;
	left:36%;
	width:163px;
	height:121px;
	background-image: url("../images/Screen 9/Button_No.png");
}

#B_yes{
	position:absolute;
	top:50%;
	left:51%;
	width:163px;
	height:121px;
	background-image: url("../images/Screen 9/Button_Yes.png");
}

#B_no:hover{
	position:relative;
	top:50%;
	left:36%;
	width:163px;
	height:121px;
	background-image: url("../images/Screen 9/Button_No_S.png");
}

#B_yes:hover{
	position:relative;
	top:50%;
	left:51%;
	width:163px;
	height:121px;
	background-image: url("../images/Screen 9/Button_Yes_S.png");
}

/* --------sec 10 --------------------------------------------------------------------*/
#sec10{	
	background: #ffbf47;
	height:100vh;
	width:100%;
	cursor: pointer;
}
#sec10>div{
	background: #ffbf47 url("../images/Screen 10/Bos.png") no-repeat 50% 60%;
}

#sec10 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 20px;
	right: 40px;
	font-weight: lighter;
}

#boss_face{
	position:absolute;
	top:17.3%;
	left:44.8%;
	width:115px;
	height:115px;
	background-image: url("../images/Screen 10/Bos_Face_1.png");
	cursor: pointer;
}

#boss_talk{
	position:absolute;
	top:22%;
	left:58%;
	width:145px;
	height:140px;
	background-image: url("../images/Screen 10/Bos_Talk2.png");
}

.progressbar {
 background-color:#e69601;
 width: 30px;
 height: 215px;
 position: absolute;
 top:20%;
 left:15%;
 border-radius: 25px;
}

.progressbar-value {
 position: absolute;
 display: block;
 margin: 0;
 border: 0;
 width: 30px;
 height: 80px;
 top: 135px;
 left: 0px;
 overflow: hidden;
 text-indent: -30px;
 background-color: #c73746;
 border-bottom-left-radius: 25px;
 border-bottom-right-radius: 25px;
}

#progressbar-per {
	position:relative;
	top:55%;
	background-image: url("../images/Screen 10/40per.png");
	width:141px;
	height:33px;
}
  
/* --------sec 11 --------------------------------------------------------------------*/
#sec11{	
	background: #84c560;
	background-size: 45%; 
	height:100vh;
	width:100%;
}
#sec11>div{
	background: #84c560 url("../images/Screen_11/retirement.png") no-repeat 50% 34%;
}
#sec11 img {
	position: relative;
	top: 21%;
	left: 10%;
	width: 14%;
}

/* --------sec 12 --------------------------------------------------------------------*/

#sec12{	
	background: #84c560; /*url("../images/Screen_12/final.png") no-repeat center center; */
	height:100vh;
	width:100%;
	position: relative;
}
#sec12 h1 {
	position: absolute;
	font-family: aduma;
	font-size: 40px;
	color: #FFFFFF;
	text-align: right;	
	top: 28px;
	right: 40px;
	font-weight: lighter;
}

#final_frame{
	background: url("../images/Screen_12/frame.png") no-repeat;
	background-size: 100%;
	position: relative;
	height: 432px;
	width: 600px;
	top: 17%;
	left: 27%;
}
#maslul{
	background-image: url("../images/Screen_12/End_Tracks_1.png") ;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	position: relative;
	height:184px;
	width:184px;
	top: 10.3%;
	left: 4.1%;
}
#keren{
	background-image: url("../images/Screen_12/End_Company_Ayalon.png") ;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	position: relative;
	height:184px;
	width:184px;
	top: 10.3%;
	left: 3.25%;
}			
#percentage{
	background-image: url("../images/Screen_12/End_m_5.png") ;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	position: relative;
	height:184px;
	width:184px;
	top: 10.3%;
	left: 2.55%;
}
#akamol{
	background: url("../images/Screen_12/End_Age.png") no-repeat;
	background-size: 100%;
	display: inline-block;
	position: relative;
	height:184px;
	width:184px;
	top: 8.8%;
	left: 4.1%;
}			
#piturim{
	background-image: url("../images/Screen_12/End_cut_man.png") ;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	position: relative;
	height:184px;
	width:184px;
	top: 8.8%;
	left: 3.25%;
}			
#talking{
	background: url("../images/Screen_12/End_Bos.png") no-repeat;
	background-size: 100%;
	display: inline-block;
	position: relative;
	height:184px;
	width:184px;
	top: 8.8%;
	left: 2.55%;
}


/* Common styles and resets */

.dotstyle ul {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.dotstyle li {
	position: relative;
	display: block;
	float: left;
	margin: 0 16px;
	margin-top: 20%;
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.dotstyle li a {
	top: 400%;
	left: 100%;
	width: 100%;
	height: 100%;
	outline: none;
	border-radius: 50%;
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.3);
	text-indent: -999em; /* make the text accessible to screen readers */
	cursor: pointer;
	position: absolute;
}
.dotstyle li a:focus {
	outline: none;
}


/* Scale up */

.dotstyle-scaleup li a {
	-webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.dotstyle-scaleup li a:hover {
	background-color: white;
}

.dotstyle-scaleup li.current a {
	background-color: white;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

/* Shaked elements */

@-webkit-keyframes spaceboots {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
.shake {
	display:inline-block
}