@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------Begin Of Reset Code ------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td {	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-weight: inherit;	font-style: inherit;	font-size: 100%;	font-family: inherit;	vertical-align: baseline; text-decoration:none;}
/* remember to define focus styles! */
:focus {outline: 0;}
ol, ul { 	list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */

blockquote:before, blockquote:after,
q:before, q:after {	content: "";}
blockquote, q {	quotes: "" "";}
/*----------------------------------------------------End Of Reset Code ------------------------------------------------------*/

/* ----------------- Common ---------------------- */
.fltlft { float:left; }
.fltrgt { float:right }
.clear 	{ clear:both; font-size:0px; line-height:0px; padding:0px; margin:0px; height:0px; }
.clrBlock{clear:both; font-size:0px; line-height:0px; display:block;}
html	{ height:100%;}
body{ font: 12px Arial, Helvetica, sans-serif; color:#000000; margin:0px; padding:0px; font-size:75%; height:100%;}
strong{font-weight:bold;}
* {
    box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
}


.container																{width:100%; height:auto; margin:0 auto;}

/*--------------------------------- Navigation ------------------------------*/

nav.mainmenu																	{width:100%;}
nav.mainmenu ul																	{display:block; padding:0; text-align:center;}
nav.mainmenu ul li																{ display:inline; padding:0;}
nav.mainmenu ul li a																{color:#000; display:inline-block; line-height:50px; font-family:Arial, Helvetica, sans-serif; font-size:1.3em; color:#533800; text-transform:capitalize; padding:0 7px;}
nav.mainmenu ul li a:hover														{text-decoration:none; color:#000;}

/*---------------------------------------------------------------------------*/

.midcontent		{ height:100%;}

/*--------------------------------- Header ---------------------------------*/
header, footer																	{width:100%; background:url(../images/transheadfoot.png) repeat; height:50px;}
/*-------------------------------------------------------------------------*/

/*----------------------------- Body Container ----------------------------*/
#body_contnainer														{width:auto; background-color:#999;}
.mainContent	{ position:relative; z-index:99; height:100%}

.jphome, .step2 { transition:5s all ease; -o-transition:5s all ease; -webkit-transition:5s all ease; opacity:0;}
.step3 { transition:1s all ease; -o-transition:1s all ease; -webkit-transition:1s all ease; opacity:0;}

.jphome			{ margin:0 auto; position:relative; height:100%;}


.jppic			{ width:67%; position:absolute; bottom:0px; right:220px; }
.jpsignhome		{ width:25%; position:absolute; top:43%; right:70%;}

.jppic img, .jpsignhome img		{ width:100%; height:auto; display:block;}



.mainContent .whitebox	{ position:absolute; text-align:center; width:200px; height:50px; line-height:50px; color:#543900;
 border-radius:2px; border:2px solid #fff; font-size:3.333em; font-family:"Times New Roman", Times, serif; font-style:italic;}
.mainContent .whitebox.lefttop	{ left:50px; top:90px; z-index:99;}
.mainContent .whitebox.leftbot { left:50px; bottom:90px; font-size:2.5em; background:url(../images/brownarrow.png) 150px 20px no-repeat;  z-index:99;	}
.mainContent .whitebox.righttop {right:50px; top:90px; z-index:99;}
.mainContent .whitebox.rightbot {right:50px; bottom:90px; font-size:2.5em;background:url(../images/brownarrow.png) 160px 20px no-repeat; z-index:99;}


/* inner page CSS */
.inbody	{ background:url(../images/ibody_bg.jpg) repeat;}
.innerheader	{ background:url(../images/header.jpg) center top no-repeat; height:470px; position:relative; overflow:hidden;}
.injp	{ position:absolute; bottom:-10px; right:10%;}
.logoin	{ margin:90px 0 0 5%;}
.container2 { width:95%; margin:0 auto;}
.mainInnerbody	{ padding:30px 0;}

.yearMenu   { display:inline-block; float:left; text-align:center; width:15%; margin:0 15px; position:relative;}
.yearMenu  h2 {color:#865d0a; font-size:22px; font-family:Verdana, Geneva, sans-serif;border-bottom:#d4b36f solid 1px; line-height:26px; border-top:#d4b36f solid 1px; padding:3px 0;margin:0 0 10px 0;}
.yearMenu ul {}
.yearMenu ul li { color:#865d0a; line-height:32px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}
.yearMenu ul li a{ color:#865d0a; line-height:32px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}
.yearMenu ul li a:hover{ border:#865d0a solid 1px; padding:3px 15px;}

.maincont	{ display:inline-block; float:left; width:60%; margin:0 15px; position:relative;}
.maincont h1 { color:#865d0a; font-family:"Times New Roman", Times, serif; font-size:36px; border-bottom:#d4b36f solid 1px; border-top:#d4b36f solid 1px; padding:3px 0; margin:0 0 10px 0;}
.maincont p { font-family:Verdana, Geneva, sans-serif; font-size:14px; line-height:26px;}
.imgbdr {border:#d4b36f solid 1px; margin:0 0 0 20px; width:80%; height:80%;}
.left { float:right; width:300px; margin:0; padding:0;}
article { width:100%; margin:0; padding:0 ; float:left;}


.mainlink   { display:inline-block; float:left; width:15%;text-align:center; margin:0 0 0 20px; position:relative;}
.mainlink  h2 {color:#865d0a; font-size:22px; font-family:Verdana, Geneva, sans-serif;border-bottom:#d4b36f solid 1px; border-top:#d4b36f solid 1px; padding:3px 0;margin:0 0 10px 0;}
.mainlink ul {}
.mainlink ul li { color:#865d0a; line-height:45px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}
.mainlink ul li a{ color:#865d0a; line-height:45px; font-family:Verdana, Geneva, sans-serif; font-size:14px;}
.mainlink ul li a:hover{ border:#865d0a solid 1px; padding:3px 15px;}

.clear { clear:both;}


a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:-30px; margin-left:28px; width:300px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;} .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;} /*CSS3 extras*/ a.tooltip span { border-radius:4px; box-shadow: 5px 5px 8px #CCC; }

.back { background:#e8cf99; padding:5px 15px; width:75px; margin:0 0 0 295px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.back a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333;}

.textcontainer	{ width:60%; margin:0 4%;}
.curvecont	{ background:url(../images/header-hide.png) center center no-repeat; width:100%; height:97px; position:absolute; bottom:0px;}


/*  GRID OF THREE   ============================================================================= */
.col_1_of_3{
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	border: 0px solid #EEE7EB;
}
.col_1_of_3:first-child { margin-left: 0; }
.span_1_of_3 {
	width: 100%;
	padding:1.5%; 
}
.span_1_of_3  h3{
	color:#C94848;
	margin-bottom:0.5em;
	font-size:1.5em;
	line-height: 1.2;
	font-weight : normal;
	margin-top: 0px;
	letter-spacing: -1px;
}
.span_1_of_3  p  {
	font-size:13px;
	padding:0.5em 0;
	color: #333;
	line-height: 1.5em;
}

.post-list{
	border-bottom: 0px solid #EEE7EB;
	padding:19px 0;
}
.post-list h2{
	color: #F00;
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	padding:10px 0;
	border-bottom:0px solid #EEE7EB;
	margin-bottom:20px;
}

.post-list p { width:73%; float:left; line-height:1.8em;}

span.time {
	color:#865d0a;
	font-size: 18px;
	font-weight: normal;
}

h5.head {
	color: #865d0a;
	padding:0 0 1% 0; margin:0;
	font-size:36px; font-family:"Times New Roman", Times, serif;
}

.thumbnail {
	position: relative;
	display: block;
	float: left;
	width: 25%;

}
.thumbnail a img {
	display: block;
}


/*-------------------------------------------------------------------------*/

/*-------------------------------- Footer ---------------------------------*/
footer																	{ height:30px; padding:0 30px; position:absolute; bottom:0px; left:0px; right:0px;}
.copyright	{ float:left; line-height:30px; font-size:1em; color:#543900; }

footer nav.footnav	{ float:right;}
footer nav.footnav ul	{ display:block;}
footer nav.footnav ul li	{ display:inline;}
footer nav.footnav ul li a	{ display:inline-block; padding:0 15px; line-height:30px; font-size:1em; color:#543900; font-family:Arial, Helvetica, sans-serif
;}
footer nav.footnav ul li a:hover	{ color:#000;}

/*-------------------------------------------------------------------------*/


/* ----------------- Common ---------------------- */

.box-shadow					{-moz-box-shadow: 3px 3px 5px #7c7c7c; -webkit-box-shadow: 3px 3px 5px #7c7c7c; box-shadow: 3px 3px 5px #7c7c7c; behavior: url('PIE.htc'); position:relative;}
.border-radius				{border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; behavior: url('PIE.htc'); position:relative;}

header.step3				{ position:absolute; left:0; top:0; left:0; width:100%; z-index: 999;}
a.menubtn					{ display:none;}

/* media queryy*/



 @media only screen and (min-width: 1440px) and (max-width:1599px) {
.jppic	{ width:80%;}
.jpsignhome	{ width:15%; right:80%;}
}
@media only screen and (min-width: 1600px) and (max-width:1910px) {
.jppic	{ width:70%;}
.jpsignhome	{ width:20%; right:75%;}
}

@media only screen and (min-width: 1600px) and (min-height:1050px) {
.jppic	{ width:85%;}
.jpsignhome	{ width:20%; right:75%;}
}


@media only screen and (min-width: 1919px) and (min-height:1080px) {
.jppic	{ width:77%;}
.jpsignhome	{ width:20%; right:75%;}
}

@media only screen and (min-width: 1200px) and (max-width:1275px) {
	nav.mainmenu ul li a	{ padding:0 3px;}
}
@media only screen and (min-width: 768px) and (max-width:1199px) {
    
    .jppic	{ width:80%;}
.jpsignhome	{ width:55%; right:25%; top:20%;}
    
	a.menubtn				{display:block; position:absolute; right:20px; top:15px; }
	nav.mainmenu ul			{ width:250px; position:absolute; right:0; top:100%; background-image: url("../images/transheadfoot.png"); background-position:left top; background-repeat:repeat; padding:10px 0 15px; display:none;}
	nav.mainmenu ul			{ float:none;}
	nav.mainmenu ul	 li		{float:none; display:block;}
	nav.mainmenu ul li a	{ line-height:40px; padding:0 20px;}
	a.menubtn span			{ font-size:20px; color:#654b14; line-height:19px; text-transform:uppercase; padding-right:10px;}
}

@media only screen and (min-width: 600px) and (max-width:767px) {
    
        
.jpsignhome	{ width:55%; right:25%; top:20%;}
	a.menubtn				{display:block; position:absolute; right:20px; top:15px; }
	nav.mainmenu ul			{ width:250px; position:absolute; right:0; top:100%; background-image: url("../images/transheadfoot.png"); background-position:left top; background-repeat:repeat; padding:10px 0 15px; display:none;}
	nav.mainmenu ul			{ float:none;}
	nav.mainmenu ul	 li		{float:none; display:block;}
	nav.mainmenu ul li a	{ line-height:40px; padding:0 20px;}
	a.menubtn span			{ font-size:20px; color:#654b14; line-height:19px; text-transform:uppercase; padding-right:10px;}
	.jppic					{ right: 10px; width: 70%;}
	footer					{ height:60px;}
	.copyright				{ float:none; width:100%; display:block; text-align:center;}
	footer nav.footnav		{ float:none; width:100%;}
	.mainContent .whitebox.lefttop	{ left:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.leftbot	{ left:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.righttop	{ right:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.rightbot	{ right:118px; font-size: 2.2em; background-position: 112px 13px;top:230px;}
	.mainContent .whitebox		{ width:135px; height:40px; line-height:37px; }
	footer nav.footnav ul		{ text-align:center;}
}

@media only screen and (min-width: 480px) and (max-width:599px) {
	a.menubtn				{display:block; position:absolute; right:20px; top:15px; }
	nav.mainmenu ul			{ width:100%; position:absolute; right:0; top:100%; background-image: url("../images/transheadfoot.png"); background-position:left top; background-repeat:repeat; padding:10px 0 15px; display:none;}
	nav.mainmenu ul			{ float:none;}
	nav.mainmenu ul	 li		{float:left; width:50%;}
	nav.mainmenu ul li a	{ line-height:40px; padding:0 20px;}
	a.menubtn span			{ font-size:20px; color:#654b14; line-height:19px; text-transform:uppercase; padding-right:10px;}
	.jppic					{ right: 10px; width: 70%;}
    .jpsignhome	{ width:55%; right:25%; top:20% !important;}
	footer					{ height:60px;}
	.copyright				{ float:none; width:100%; display:block; text-align:center;}
	footer nav.footnav		{ float:none; width:100%;}
	.mainContent .whitebox.lefttop	{ left:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.leftbot	{ left:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.righttop	{ right:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.rightbot	{ right:118px; font-size: 2.2em; background-position: 112px 13px;top:230px;}
	.mainContent .whitebox		{ width:135px; height:40px; line-height:37px; }
	footer nav.footnav ul		{ text-align:center;}
}

@media only screen and (min-width: 300px) and (max-width:479px) {
	a.menubtn				{display:block; position:absolute; right:20px; top:15px; }
	nav.mainmenu ul			{ width:100%; position:absolute; right:0; top:100%; background-image: url("../images/transheadfoot.png"); background-position:left top; background-repeat:repeat; padding:10px 0 15px; display:none;}
	nav.mainmenu ul			{ float:none;}
	nav.mainmenu ul	 li		{float:left; width:50%;}
	nav.mainmenu ul li a	{ line-height:40px; padding:0 20px;}
	a.menubtn span			{ font-size:20px; color:#654b14; line-height:19px; text-transform:uppercase; padding-right:10px;}
	.jppic					{ right: 10px; width: 70%;}
    .jpsignhome	{ width:65%; right:17%; top:20% !important;}
	footer					{ height:60px;}
	.copyright				{ float:none; width:100%; display:block; text-align:center;}
	footer nav.footnav		{ float:none; width:100%;}
	.mainContent .whitebox.lefttop	{ left:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.leftbot	{ left:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.righttop	{ right:20px; font-size: 2.2em; background-position: 112px 13px;}
	.mainContent .whitebox.rightbot	{ right:118px; font-size: 2.2em; background-position: 112px 13px;top:230px;}
	.mainContent .whitebox		{ width:135px; height:40px; line-height:37px; }
	footer nav.footnav ul		{ text-align:center;}
	.copyright				{ font-size:0.95em;}
	footer					{ padding:0 10px;}
	footer nav.footnav ul li a	{font-size:0.95em; padding:0 2px;}
	.jppic					{ right: 0;
    width: 100%; bottom:60px;}
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute; background: #fff;
    top: 100%;
    left: 0;
  }
}


@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 320px) {}