@font-face {
font-family:Irregularis;
src: url(../fonts/Irregularis.ttf);
}
@font-face {
font-family:Mali;
src: url(../fonts/TH_Mali_Grade6_Bold.ttf);
}

		body{
			margin:0;
			background:url(../img/bg-paper.jpg) ;
			background-size:cover;
			background-position: center;
			font-family:Irregularis;
			overflow:hidden;
			height:100%;
			width:100%;
			display:none;
		}

		#container{
			position:relative;
			min-width: 955px;
			min-height: 600px;
			overflow: hidden;
		}

		h1, h2, h3, h4, h5, h6 {
			 margin: 0;
			 padding: 0;
			 font-weight: normal;
			 font-family:Irregularis;
		}

		a{
			text-decoration: none;
			color:inherit;
		}

		h1{
			color:rgba(0,0,0,0.8);
			font-size: 30px;
			letter-spacing: 1px;
			
		}

		h2{
			color:rgba(0,0,0,0.8);
			font-size:16px;
			margin:3px 0 0 3px;
		}

		span{
			font-size: 16px;
		}

		.bold{
			-webkit-text-stroke-width: 0.3px;
   			-webkit-text-stroke-color: rgba(0,0,0,0.8);
		}





		#header-menu{position:absolute; margin:40px 0 0 40px; z-index:3;}
		#header-menu a:hover .bt-mode-dots{color:rgba(0,0,0,1);}
		.bt-mode-dots{
			color:rgba(0,0,0,0.5);
			-webkit-text-stroke-width: 0.3px;
   			-webkit-text-stroke-color: rgba(0,0,0,0.5);
		}
		.active-mode-dots{
			opacity:1 !important;
		}




		#right-menu{position:absolute; right:40px; top:45px; z-index: 3;}
		#bt-lang{
			float:left;
			width:36px;
			height:30px;
			background:url(../img/bt-lang.png)0 0;
		}
		#bt-sound{
			float: left;
			width:36px;
			height:30px;
			background:url(../img/bt-sound.png) 0 0;
		}
		#bt-fullscreen{
			float:left;
			width:36px;
			height:30px;
			background:url(../img/bt-fullscreen.png) 0 0;
		}


		#footer #line-left{width:35%; height:5px; position:absolute; bottom:60px; left:0; margin-left:40px;}
		#footer #line-right{width:35%; height:5px; position:absolute; bottom:60px; right:0; margin-right:40px;
			-webkit-transform:scaleX(-1) scaleY(-1);
		 }
		 #clock{
		 	position:absolute;
		 	bottom:-145px;
		 	left:50%;
		 	margin-left:-145px;
		 	width:290px;
		 	height:290px;
		 	border-radius:50%;
		 	background:#333333;
		 	/*background:rgba(0,0,0,0.8);*/
		 	z-index: 3;
		 	font-size: 20px;
		 }
		 #clock_film{
		 	position:absolute;
		 	width:310px;
		 	height:310px;
		 	border-radius:50%;
		 	background:rgba(0,0,0,0.3);
		 	z-index: 1;
		 	left:50%;
		 	margin-left:-155px;
		 	bottom:-155px;
		 	-webkit-transition:all 0.4s ease-out;
		 	opacity:0;
		 }
		 #bg-currentSec{
		 	width:32px;
		 	height:32px;
		 	border-radius:50%;
		 	background:white;
		 	text-align:center;
		 	margin:20px auto;
		 }
		 #currentSec{position:relative;top:3.5px;margin-left:-0.5px;font-size: 20px;color:rgba(0,0,0,0.8);}
		 #hourAndMin{
		 	color:white;
		 	position:relative;
		 	text-align:center;
		 	width:200px;
		 	margin:-15px auto;
		 }
		 #hourAndMin span{font-size: 40px;}
		 #dateMonthYear{
		 	color:white;
		 	position:relative;
		 	text-align:center;
		 	width:290px;
		 	margin:10px auto;
		 }
		 #dateMonthYear span{font-size: 20px;}




		 .mainDots{
		 	position:absolute;
		 	width:80px;
		 	height:80px;
		 	border-radius:50%;
		 	background:rgba(0,0,0,0.8);
		 	margin-left:-40px;
		 	margin-top:-40px;
		 	z-index: 5;
		 	opacity:0;
		 	
		 }
		 .flim-dots{
		 	position:absolute;
		 	width:130px; 
		 	height:130px; 
		 	border-radius:50%; 
		 	background:rgba(0,0,0,0.3);
		 	left:50%;
		 	top:50%;
		 	margin-left:-65px;
		 	margin-top:-65px;
		 	opacity:0;
		 	-webkit-transition:all 0.4s;
		 }
		 .flim-secDots{
		 	position:absolute;
		 	width:80px; 
		 	height:80px; 
		 	border-radius:50%; 
		 	background:rgba(0,0,0,0.3);
		 	left:50%;
		 	top:50%;
		 	margin-left:-40px;
		 	margin-top:-40px;
		 	opacity:0;
		 	-webkit-transition:all 0.4s;
		 	/*-Webkit-animation-name: rotate;
    		-Webkit-animation-duration: 10s;
    		-webkit-animation-timing-function: linear;
    		-webkit-animation-iteration-count: infinite;
			-webkit-animation-direction: forward;
			-webkit-animation-play-state: running;*/
		 }
		/* @-webkit-keyframes rotate
    	{
       		0%{-webkit-transform:rotate(0deg);}
       		100% {-webkit-transform:rotate(360deg);}
    	}*/
    	 .transition{
		 	-webkit-transition: all 0.4s ease-out;
		 }
    	.bounceIn{
    		-Webkit-animation-name: bounceIn;
    		-Webkit-animation-duration: 0.5s;
    		-webkit-animation-timing-function: ease-out;
    		-webkit-animation-iteration-count: 1;
			-webkit-animation-direction: normal;
			-webkit-animation-play-state: running;
			-webkit-animation-fill-mode:forwards;
    	}
    	@-webkit-keyframes bounceIn
    	{
       		0%{-webkit-transform:scale(0,0);}
       		80% {-webkit-transform:scale(1.2,1.2);}
       		100% {-webkit-transform:scale(1,1);}
    	}
    	.bounceIn-circle{
    		-webkit-transform:scale(1,1) !important;
    	}
    	.bounceOut{
    		-webkit-transform:scale(0,0);
    	}

    	.animate{
    		-Webkit-animation:1s bounce infinite alternate;
    		-webkit-animation-timing-function: ease-out;
		}
		@-webkit-keyframes bounce{
			from{-webkit-transform:scale(1,1)}
			to{-webkit-transform:scale(1.08,1.08)}
		}

		 .flim-dots span{
		 	position:relative;
		 	top:2px;
		 	font-size: 20px;
		 	color:rgba(0,0,0,0.8);
		 	letter-spacing: 1px;
		 	font-weight: bold;
		 	pointer-events:none;
		 }
		 .flim-secDots span{
		 	position:relative;
		 	top:1px;
		 	font-size: 20px;
		 	color:rgba(0,0,0,0.8);
		 	letter-spacing: 1px;
		 	font-weight: bold;
		 	pointer-events:none;
		 }
		 .bg-dots{
		 	position:absolute;
		 	width:80px; 
		 	height:80px; 
		 	border-radius:50%; 
		 	background:#333333;
		 	pointer-events:none;
		 }
		 .secDots{
		 	position:absolute;
		 	width:40px;
		 	height:40px;
		 	border-radius:50%;
		 	background:#333333;
		 	margin-left:-20px;
		 	margin-top:-20px;
		 	z-index: 4;
		 	opacity:0;
		 	
		 }
		 .dots{
		 	color:black; font-size: 20px; text-align: center;
		 }
		 .dots img{
		 	position:absolute;
		 	pointer-events:none;
		 }

		 .dots #born-pictogram{left:0px;top:3px;}
		 .dots #nodes-pictogram{left:0px;top:0px;}
		 .dots #fence-pictogram{left:0px;top:0px;}
		 .dots #candy-pictogram{left:0px;top:0px;}
		 .dots #newspaper-pictogram{left:0px;top:0px;}
		 .dots #trainee-pictogram{left:0px;top:0px;}
		 .dots #typo-pictogram{left:0px;top:0px;}
		 .dots #start-pictogram{left:0px;top:0px;}
		 .dots #success-pictogram{left:0px;top:0px;}
		 .dots #fire-pictogram{left:0px;top:0px;}
		 .dots #zen-pictogram{left:0px;top:0px;}
		 .dots #comeback-pictogram{left:0px;top:0px;}
		 .dots #legend-pictogram{left:0px;top:0px;}
		 .dots #death-pictogram{left:0px;top:0px;}

		 .linePencilDots{
		 	position:absolute;
		 	height:8px;
		 	-webkit-transform-origin:left;
		 	z-index: 2;
		 	overflow:hidden;
		 	opacity:0.8;
		 	margin-top:-4px;
		 }

		 /*.linePencilDots:before{
		 	content : url(../img/arrow.png);
		 	position: absolute;
		 	left:50%;
		 }*/

		 .linePencilDots .line{
		 	position:relative;
		 	height:8px;
		 }

		 .arrow{
		 	position:absolute;
		 	left:50%;
		 	margin-top: -18px;
		 }