/* Page Transition
====================================================================================== */

/* animation sets */

/* fade */
.pt-page-moveFromRightFade {
	-webkit-animation: moveFromRightFade .7s ease both;
	-moz-animation: moveFromRightFade .7s ease both;
	animation: moveFromRightFade .7s ease both;
}

.pt-page-moveToLeftFade {
	-webkit-animation: moveToLeftFade .7s ease both;
	-moz-animation: moveToLeftFade .7s ease both;
	animation: moveToLeftFade .7s ease both;
}
.pt-page-moveFromLeftFade {
	-webkit-animation: moveFromLeftFade .7s ease both;
	-moz-animation: moveFromLeftFade .7s ease both;
	animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveToRightFade {
	-webkit-animation: moveToRightFade .7s ease both;
	-moz-animation: moveToRightFade .7s ease both;
	animation: moveToRightFade .7s ease both;
}

.pt-page-moveFromTopFade {
	-webkit-animation: moveFromTopFade .7s ease both;
	-moz-animation: moveFromTopFade .7s ease both;
	animation: moveFromTopFade .7s ease both;
}

.pt-page-moveToBottomFade {
	-webkit-animation: moveToBottomFade .7s ease both;
	-moz-animation: moveToBottomFade .7s ease both;
	animation: moveToBottomFade .7s ease both;
}
/********************************* keyframes **************************************/

/* fade */
@-webkit-keyframes moveFromRightFade {
	from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRightFade {
	from { opacity: 0.3; -moz-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
	from { opacity: 0.3; transform: translateX(100%); }
}
@-webkit-keyframes moveToLeftFade {
	to { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeftFade {
	to { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
	to { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeftFade {
	from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeftFade {
	from { opacity: 0.3; -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
	from { opacity: 0.3; transform: translateX(-100%); }
}

@-webkit-keyframes moveToRightFade {
	to { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRightFade {
	to { opacity: 0.3; -moz-transform: translateX(100%); }
}
@keyframes moveToRightFade {
	to { opacity: 0.3; transform: translateX(100%); }
}

@-webkit-keyframes moveFromTopFade {
	from { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTopFade {
	from { opacity: 0.3; -moz-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
	from { opacity: 0.3; transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottomFade {
	to { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveToBottomFade {
	to { opacity: 0.3; -moz-transform: translateY(100%); }
}
@keyframes moveToBottomFade {
	to { opacity: 0.3; transform: translateY(100%); }
}
/* PT PAGE
----------------------------------------------------------------- */
@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  src: local('Arvo'), url(http://themes.googleusercontent.com/static/fonts/arvo/v6/WJ6D195CfbTRlIs49IbkFw.woff) format('woff');
}

html, body{
    height:100%;
    margin: 0;
    overflow: hidden;
	font-family: 'Arvo', serif; 
}
#logo img{
	padding: 3px;
	height: 50px;
}

a:link {text-decoration:none;color: #4A4C4C;}

a:visited {
	text-decoration:none;
	color: #4A4C4C;
}
a:hover {
	text-decoration:none;
	color: #4A4C4C;
}
a:active {
}

.libtn{
	padding: 1px;
	font-size: 12px;
}

.libtn:hover{
	background-color: #E7E7E7;
}

h1{
	margin: 12px 0px 10px 0px;
	padding: 0px;
	font-family: 'Arvo', serif;
	color: #4A4C4C;
	font-size: 22px;
}

#application-window{
	height: 100%;
	padding: 0px;
	background-color: #F8F8F8;
}

#banner{
	background-color: #60626C;
    height: 55px;
    padding-top: 6px;
    padding-left: 125px;
}
	
#map-title{
	color: #FFFFFF;
    font-size: 26px;
    font-weight: normal;
    line-height: 32px;
}

#map-subtitle{
    color: #FFFFFF;
	font-size: 14px;
	line-height: 15px;
	font-weight: normal;
}

#branding-region{
	position: absolute;
	top: 0px;
	right: 0px;
}	

#nav-window{
	padding: 0px;
    text-align: center;
}

#navList li{
	display: inline;
    list-style-type: none;
    padding-left: 25px;
    padding-right: 25px;
}

ul{
	margin: 5px;
}

selector{
	text-shadow : h-shadow v-shadow blur color;
}

.arrow{
	opacity:0.3;
}

.arrow:hover{
	opacity: 0.8;
}

.dirText{
	color:black;
	font-size:40px;
	margin-top:45px;
	opacity:0.0;
}

.control{
	position:fixed;
	width:100px;
	cursor:pointer;	
}

#rightControl{
	right:0px;
	top:250px;
	text-align:right;
	z-index: 999;
}

#leftControl{
	left:0px;
	top:250px;
	z-index: 999;
}

.pagewin{
	position: absolute;
	left: 100px;
	right: 150px;
	top: 0px;
	overflow: hidden;
}

.txttable{
	width: 325px;
	float: left; 
	padding-right: 10px; 
	height:100%;
}

.txttable p{
	margin: 12px 0px 10px 0px;
	padding: 0px;
	font-family: 'Arvo', serif;
	color: #3D3D3D;
	font-size: 13px;
	line-height: 20px;
}

.txttable li{
	margin: 12px 0px 10px 0px;
	list-style-type: disc;
	color: #3D3D3D;
	font-size: 13px;	
	font-family: 'Arvo', serif;
	line-height: 20px;
}

.imgtable{
	margin-left: 350px;
}

.imgtable img{
	width: 868px;
}

.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1100px;
	-moz-perspective: 1100px;
	-o-perspective:1100px;
	perspective: 1100px;
}

.pt-page {
    border-radius: 0 0 0 5px;
    box-shadow: -3px 3px 3px -2px #F1F1F3;
	width: 100%;
	height: 100%;
    margin-left: -26px;
    padding-right: 50px;
   	min-height: 600px;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
    opacity: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
	visibility: visible;
    opacity: 1;
	z-index: 1;
}

.no-js body {
	overflow: auto;
}

.pt-page-ontop {
	z-index: 999;
}

/* Text Styles, Colors, Backgrounds */
.pt-page {
     margin: 0px; 
     background: none repeat scroll 0 0; 
}

figure{ 
	display: block; 
	position: relative; 
	float: left; 
	overflow: hidden; 
	margin: 0 20px 20px 0; 
} 

figcaption{ 
	position: absolute; 
	font-family: 'Arvo', serif;
	font-size:13px;
	background: black; 
	background: rgba(0,0,0,0.75); 
	color: white; 
	padding: 10px 20px; 
	opacity: 0; 
	z-index: 999;
	-webkit-transition: all 0.6s ease; 
	-moz-transition: all 0.6s ease; 
	-o-transition: all 0.6s ease; 
} 

figure:hover figcaption { opacity: 1; } 

figure:before { 
	content: "i"; 
	position: absolute; 
	font-weight: 800; 
	background: black; 
	background: rgba(255,255,255,0.75); 
	text-shadow: 0 0 5px white; 
	color: black; 
	width: 24px; 
	height: 24px; 
	-webkit-border-radius: 12px; 
	-moz-border-radius: 12px; 
	border-radius: 12px; 
	text-align: center; 
	line-height: 24px; 
	-moz-transition: all 0.6s ease; 
	opacity: 0.75; 
	z-index: 999;
} 

figure:hover:before { opacity: 0; } 

.cap-left:before { bottom: 10px; left: 10px; } 

.cap-left figcaption { bottom: 0; left: -30%; } 

.cap-left:hover figcaption { left: 0; }

.beforeafter{
	position:relative;
	overflow:hidden;
	height:563px;
	width:868px;
	-ms-touch-action:Â none;
}

.beforeafter:-webkit-full-screen{width:100% !important;height:100% !important;}
.before,.after{
	position:absolute;
	top:0;
	left:0;
	background-size:auto 100%;
	background-repeat:no-repeat;
}

.before{border-right:5px solid #000;}
.before:after{
	content:"";
	position:absolute;
	right:-29px;
	top:0;
	bottom:0;
	width:29px;
	background-position:left top;
	background-repeat:repeat-y;
}

.help{
	position:absolute;
	top:15px;
	left:30px;
	margin-left:20px;
	font:bold 20px/1em Helvetica,Arial,sans-serif;
	color:#FFF;
	opacity:0.9;
}

@media screen and (max-width: 47.4375em) {
	.pt-page h1 {
		font-size: 3em;
	}

	.pt-triggers .dl-menuwrapper {
		display: none;
	}
}

@media screen and (max-height: 45.9em) {
	.pt-triggers .dl-menuwrapper li a {
		padding-top: 2px;
		padding-bottom: 2px;
	}
	.pt-triggers .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after {
		line-height: 24px;
	}
}

@media screen and (max-height: 38em) { 
	.pt-triggers .dl-menuwrapper {
		display: none;
	}
}