       
*{
	margin:0;
	padding:0;
}
body{
	/* background:#eba426;	*/
	background:rgb(167, 211, 252) ;
	color:#444;
	font-size:12px;
	color: #333;
    font-family: 'Oswald', sans-serif;
}
 
.booklet           {
	width:900px;
	height:607px;
	position:relative;
	margin:0 auto 10px;
	-moz-box-shadow:0px 0px 1px #fff;
	-webkit-box-shadow:0px 0px 1px #fff;
	box-shadow:0px 0px 1px #fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
.booklet .b-page-cover  {padding:0; width:100%; height:100%; background: hsl(59, 71%, 77%) !important;}
.booklet .b-wrap-left  {
	background:#fff url(../images/left_bg.jpg) no-repeat top left;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right {
	background:#efefef url(../images/right_bg.jpg) no-repeat top left;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.booklet .b-counter {
	bottom:10px;
	position:absolute;
	display:block;
	width:90%;
	height:20px;
	border-top:1px solid #ddd;
	color:#222;
	text-align:center;
	font-size:12px;
	padding:5px 0 0;
	background:transparent;
	-moz-box-shadow:0px -1px 1px #fff;
	-webkit-box-shadow:0px -1px 1px #fff;
	box-shadow:0px -1px 1px #fff;
	opacity:0.8;
}
.book_wrapper{
	margin:0 auto;
	padding-top:50px;
	width:905px;
	height:540px;
	position:relative;
	background:transparent url(../images/bg.png) no-repeat 9px 27px;
}
.book_wrapper h1{
	/* color:orange; */
	color:#0a06f3;
	text-align: center;
	font-weight: bold;
	margin:5px 5px 5px 15px;
	font-size:24px;
	/* background:transparent url(images/h1.png) no-repeat bottom left; */
	padding-bottom:7px;
    text-transform: uppercase;
}
.book_wrapper p{
	font-size:15px;
	margin:5px 5px 5px 15px;
}

.book_wrapper video {
	pointer-events: visible !important;
}

.book_wrapper a.article,
.book_wrapper a.demo{
	background:transparent url(../images/circle.png) no-repeat 50% 0px;
	display:block;
	width:95px;
	height:41px;
	text-decoration:none;
	outline:none;
	font-size:16px;
	color:#555;
	float:left;
	line-height:41px;
	padding-left:47px;
}
.book_wrapper a.demo{
	margin-left:50px;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
	background-position:50% -41px;
	color:#13386a;
}
.book_wrapper img{
	margin:10px 5px 5px 35px;
/*	width:300px; */
	width:290px;
	padding:4px;
	border:1px solid #ddd;
	-moz-box-shadow:1px 1px 1px #fff;
	-webkit-box-shadow:1px 1px 1px #fff;
	box-shadow:1px 1px 1px #fff;
}
.booklet .b-wrap-right img{
	border:1px solid #E6E3C2;
}
.img-goback_arrow {
	height:20px !important;
	width:auto !important;
	border: 0 !important;
}
.img1a {
	height: 160px !important;
	width: auto !important;
    border: 0 !important;
    margin-top: 20px !important;
    margin-left: 0px !important;
}
.img1b {
	height: 30px !important;
	width: auto !important;
    border: 0 !important;
	margin-top: 0px !important;
	margin-left: 0px !important;
}
.img1c {
	height: 37px !important;
	width: auto !important;
    border: 0 !important;
    margin-top: 0px !important;
	margin-left: 0px !important;
}
.img1d {
	height: 40px !important;
	width: auto !important;
    border: 0 !important;
    margin-top: 0px !important;
	margin-left: 0px !important;
	margin-bottom: -5px !important;
}
.img1e {
	height: 35px !important;
	width: auto !important;
    border: 0 !important;
    margin-top: 0px !important;
	margin-left: 0px !important;
	margin-bottom: -5px !important;
}
.img1f {
	height: 35px !important;
	width: auto !important;
    border: 0 !important;
    margin-top: 0px !important;
	margin-left: 0px !important;
}
.img1g {
	height: 200px !important;
	width: auto !important;
    border: 0 !important;
    margin-top: -22px !important;
	margin-left: 0px !important;
}
.centered_text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
.centered_text_2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }  
.img2a {
	height: auto !important;
	width: 140px !important;
	border: 0 !important;
    margin-left: 0px !important;
	margin-top: 20px !important;
	margin-bottom: 0px !important;
}
.img2b {
	height:80px !important;
	width: auto !important;
	border: 0 !important;
	margin-left: -10px !important;
	margin-top: 5px !important ;
}
.watermark1 {
	position: fixed !important;
	bottom: 25% !important;
	left: 29% !important;
	opacity: 0.20 !important;
	z-index: 999 !important;
}
.img_position1 {
	position: absolute !important ;
	margin-top: -50% !important ;
	margin-left: 5% !important ;
}
.img_rotate1 {
		transform: rotate(20deg) !important;
}
.img3a {
	height: auto !important;
	width: 300px !important;
	border: 0 !important;
	margin-top: 5px !important;
	margin-left: 5px !important;
}
.img4a {
	height: 10px !important;
	width: auto !important;
	border: 0 !important;
	margin-left: -5px !important;
}
.img5a {
	height: 180px !important;
	width: auto !important;
	border: 0 !important;
    margin-top: 10px !important;
    margin-left: 0px !important;
}
.img5b {
	height: auto !important;
	width: 60% !important;
	border: 0 !important;
    margin-top: 0px !important;
    margin-left: 25% !important;
}
.img5c {
	height:auto !important;
	width: 50% !important;
	border: 0 !important;
	margin-top: 0px !important;
	margin-left: 5% !important;
}
.img5d {
	height:auto !important;
	width: 100% !important;
	border: 0 !important;
    margin-top: 10px !important;
    margin-left: -25px !important;
}
.img5e {
	height: auto !important;
	width: 80% !important;
	border: 0 !important;
    margin-top: 10px !important;
	margin-bottom: 0px !important;
    margin-left: 10px !important;
}
.img5f {
	height:150px !important;
	width: auto !important;
	border: 0 !important;
    margin-top: 10px !important;
	margin-bottom: 0px !important;
    margin-left: opx !important;
}
.img5g {
	height:auto !important;
	width: 80% !important;
	border: 0 !important;
    margin-top: 30% !important;
	margin-bottom: 0px !important;
    margin-left: 10% !important;
}
.img6a {
	height:70px !important;
	width: auto !important;
	border: 0 !important;
	margin-right: 10% !important;
	margin-top: -20px !important;
}
.img7a {
	height:auto !important;
	width: 150px !important;
	border: 0 !important;
    margin-top: 5px !important;
    margin-left: -5px !important;
}
.img_fb {
	height:20px !important;
	width:auto !important;
	border: 0 !important;
	margin-left: 5px !important;
}
.img_logo {
	height:210px !important;
	width:auto !important;
}
.img_endpage {
	height:auto !important;
	width:300px !important;
	border: 0 !important;
}
.img_sign {
	height:80px !important;
	width:auto !important;
	border: 0 !important;
}
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    width: 135px;
    height: auto;
    border: none;
/*    perspective: 1000px;  Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
    position: relative;
    width: 135px;
    height: auto;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 135px;
    height: auto;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-box-front {
    background-color: #efefef;
    color: black;
  }
  
  /* Style the back side */
  .flip-box-back {
    background-color: #efefef;
    transform: rotateY(180deg);
  }


a#next_page_button,
a#prev_page_button{
	display:none;
	position:absolute;
	width:41px;
	height:40px;
	cursor:pointer;
	margin-top:-20px;
	top:50%;
	background:transparent url(../images/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
	left:-10px;
}
a#next_page_button{
	right:-12px;
	background-position:-41px -40px;
}
a#next_page_button:hover{
	background-position:-41px 0px;
}
a#prev_page_button:hover{
	background-position:0px 0px;
} 
#go_content {
	position: absolute;
	top: 96%;
	left: 51%;
}
#go_sign {
	position: absolute;
	top: 93%;
	left: 43%;
}
#video1{
	position: absolute;
	top: 43%;
	left: 12%
}
.video_caption1{
	position: absolute;
	top: 77%;
	left: 25%;
	font-size: 11px !important; 
	background-color: #ffffff;
}
.overlay {
	position:absolute;
	top:100px;
	z-index: 10;
}

table {
	border-collapse: collapse;
	border-color: black solid;
	text-align: center;
	font-size: small;
}
#tb1 td {
	border-collapse: collapse !important;
	border: black solid 1px !important;
	text-align: left !important;
	padding-left: 8px;
	padding-right: 8px;
} 
td img{
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
	margin-top: 0px !important;
}

td > a {
	text-decoration: none; 
	color:black;
}
td :hover {
	color:#0a06f3;
}

/*.btn {
	background-color: DodgerBlue;
	border: none;
	color: white;
	padding: 6px 15px;
	cursor: pointer;
	font-size: 10px;
	display: block;
} */
.btn {
	background-color: #4CAF50;
	border: none;
	border-radius: 4px;
	color: white;
	padding: 10px 32px;
/*	padding: 15px 32px; */
	text-align: center;
	text-decoration: none;
	display: block;
	font-size: 15px;
	margin: 4px 2px;
	cursor: pointer;
  }
  /* Darker background on mouse-over */
.btn:hover {
/*	background-color: RoyalBlue; */
	background-color: rgb(6, 112, 32);
}
.btn_position1{
	position: absolute;
	top: 82%;
	left: 66%;
}
.btn_position2{
	position: absolute;
	top: 88%;
	left: 68%;
}
.btn_position3{
	position: absolute;
	top: 52%;
	left: 66%;
}
button > a {
	text-decoration: none;
	color:#ffffff;
	font-size: small;
}
.btn1 {
  background-color: #036107;
  border: none;
  border-radius: 4px;
  padding: 1px 1px 1px 1px;
  text-align: center;
  display: inline-block;
}
.btn2 {
	height:30px;
	width:130px;
	background-color: #4CAF50;
	border: none;
	border-radius: 4px;
	padding: 1px 1px 1px 1px;
	text-align: center;
	display: inline-block;
  }
.btn2:hover {
	background-color: #24a72a;
}

.loading {
	width:160px;
	height:56px;
	position: absolute;
	top:50%;
	margin-top:-28px;
	right:135px;
	line-height:56px;
	color:#fff;
	padding-left:60px;
	font-size:15px;
	background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%;
	opacity: 0.7;
	z-index:9999;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
