body {
	background-color: rgba(239,236,230,1.00);
	background-image: url(images/papertexture.png);
}

.featured-grid-container {
	width:95%;
	max-width:420px;
	margin:15px auto;
}


/* grid */
.grid {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

.grid li {
	position: relative;
	float: left;
	font-family: 'HelveticaNeueW02-65Medi', 'Helvetica Neue', Helvetica, sans-serif; /* zenon, 'Averia Serif Libre',  */
	font-weight:700;
	font-size: 5em;
	line-height: 1;
	max-height: 290px;
	text-align: center;
	width: 16%; /* Fallback */
	width: -webkit-calc(100% / 6);
	width: calc(100% / 6);
}
.grid li.max-width-curn {
	
}
.grid li.letter-space {
	max-width:8%;
}
.grid li.icons {
	font-size: 5em;
	line-height: 1;
	/* margin-top:8%; */
	width: 16.66666%;
	/* Fallback */
	width: -webkit-calc(100% / 6);
	width: calc(100% / 6);
}

/* Common styles for the letters */
.grid li span, .grid li text {
	display: inline-block;
	font-weight: 900;
	line-height: 1;
	position: relative;
	color: hsla(0, 0%, 0%, 0.0);
	/* -webkit-transform-style: preserve-3d; */
	-ms-transform-style: preserve-3d;
	/* transform-style: preserve-3d; */
	-webkit-perspective: 550px;
	-ms-perspective: 550px;
	perspective: 550px;
	z-index: 1;
}
.grid li span.iconcir {
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}

.grid li span:before,
.grid li span:after {
	position: absolute;
	content: attr(data-letter);
	line-height: inherit;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.grid li span.iconcir:before,
.grid li span.iconcir:after {
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	
}
.grid li span.iconcir:after {
	font-family: 'usps_pficons' !important;
	font-weight:normal;
	content: attr(data-icon);
}
.grid li span.nav-more, #splash span.nav-more {
	font-family: 'usps_pficons' !important;
	font-size: 0.6em;
}

#splash .morearrow {
	display: inline-block;
    position: absolute;
    bottom: -40px;
    margin: 0 auto;
    width: 80px;
    background-color: rgba(239,236,230,1.00);
    text-align: center;
    height: 80px;
    border-radius: 40px;
    font-size: 34px;
    line-height: 0.7;
    left: calc(50% - 40px);
    box-shadow: 0px -2px 15px 0px rgba(0,0,0,0.1);
}

.grid li.pf-letter-loading span:before,
.grid li.pf-letter-loading span:after,
.pf-letter-loading {
	-webkit-transition: all 3s;
	transition: all 3s;
}
.grid li.icons.pf-letter-loading span:before,
.grid li.icons.pf-letter-loading span:after,
.grid li.pf-letter-loading a p,
.splashshade {
	-webkit-transition: all 5s;
	transition: all 5s;
}

.grid li span:before {
	text-shadow: none;
	color: hsla(0, 0%, 0%, 0.12);
}
.grid li span.iconcir:before {
	text-shadow: none;
	background-color: hsla(0, 0%, 0%, 0.12);
	
}
.grid li a.letterlink {
	display: block; 
	position:absolute; 
	width:100%; 
	height:100%; 
	top:0; 
	left:0;
	z-index:99;
}

/* Colors */

.ot-letter-bottom, .ot-letter-left, .ot-letter-right, .ot-letter-top { background: transparent; } /* grid background - transparent used to be e95949 */
/* .ot-letter-bottom span, .ot-letter-left span, .ot-letter-right span, .ot-letter-top span { text-shadow: 1px 4px 6px rgba(235, 231, 224, .5), 0 0 0 hsla(0, 0%, 0%, 0.0), 1px 4px 6px rgba(235, 231, 224, 0); } */ /* letter cutout - dark */
.ot-letter-bottom span:after, .ot-letter-left span:after, .ot-letter-right span:after, .ot-letter-top span:after { color: #f5f1e9; } /* top letter flap - slightly lighter than bg */
.ot-letter-bottom:hover span:after, .ot-letter-left:hover span:after, .ot-letter-right:hover span:after, .ot-letter-top:hover span:after,
.ot-letter-bottom:focus span:after, .ot-letter-left:focus span:after, .ot-letter-right:focus span:after, .ot-letter-top:focus span:after,
.ot-letter-bottom.active-letter span:after, .ot-letter-left.active-letter span:after, .ot-letter-right.active-letter span:after, .ot-letter-top.active-letter span:after { color: #faf8f3; } /* open letter state */

.pf-letter-start.ot-letter-bottom span:after, .pf-letter-start.ot-letter-left span:after, .pf-letter-start.ot-letter-right span:after, .pf-letter-start.ot-letter-top span:after, .pf-letter-start, .pf-letter-start { color: #efece6; } /* top letter flap - just when first loading */
.pf-letter-start.ot-letter-bottom span, .pf-letter-start.ot-letter-left span, .pf-letter-start.ot-letter-right span, .pf-letter-start.ot-letter-top span { text-shadow: 0px 0px 0px #efece6, 0 0 0 hsla(0, 0%, 0%, 0), 0px 0px 0px #efece6; } /* letter cutout - dark */
.grid li.pf-letter-start span { color: hsla(0, 0%, 0%, 0); }

/* Icon colors */
.ot-letter-bottom span.iconcir { background-color: #666; box-shadow: inset 0px 0px 23px -3px rgba(0,0,0,0.75); } /* icon bg cutout - dark */
.ot-letter-bottom span.iconcir:after { background-color: #f5f1e9; } /* top icon bg flap - slightly lighter than bg */
.ot-letter-bottom span.iconcir:after { color: #999; } /* top icon color */
.ot-letter-bottom span.iconcir, .grid li span.iconcir:after  { text-shadow: none; } /* icon shadow - none */
.ot-letter-bottom:hover span.iconcir:after { background-color: #faf8f3; } /* open letter state */

.grid li.icons a p { color:#707070; }

.pf-letter-start.ot-letter-bottom.icons span:after, .pf-letter-start.ot-letter-bottom.icons span:before { background-color: #efece6; } /* top icon flap - just when first loading */
.pf-letter-start.ot-letter-bottom.icons span:after, .pf-letter-start.ot-letter-bottom.icons span.color-map:after, .pf-letter-start.ot-letter-bottom.icons span.color-oneday:after, .pf-letter-start.ot-letter-bottom.icons span.color-tablefacts:after, .pf-letter-start.ot-letter-bottom.icons span.color-topfacts:after, .pf-letter-start.ot-letter-bottom.icons p { color: #efece6; } /* top icon - just when first loading */
.pf-letter-start.ot-letter-bottom.icons span { box-shadow: inset 0px 0px 23px -3px rgba(0,0,0,0); } /* letter cutout - dark */
.grid li.pf-letter-start span.iconcir { background-color: hsla(0, 0%, 0%, 0); }

.splashshade {
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	opacity:1;

background: -webkit-linear-gradient(-45deg, rgba(136,115,89,0.15) 0%, rgba(136,115,89,0) 35%, rgba(136,115,89,0) 71%, rgba(136,115,89,0.2) 100%);
background: -moz-linear-gradient(-45deg, rgba(136,115,89,0.15) 0%, rgba(136,115,89,0) 35%, rgba(136,115,89,0) 71%, rgba(136,115,89,0.2) 100%);
background: -o-linear-gradient(-45deg, rgba(136,115,89,0.15) 0%, rgba(136,115,89,0) 35%, rgba(136,115,89,0) 71%, rgba(136,115,89,0.2) 100%);
background: linear-gradient(-45deg, rgba(136,115,89,0.15) 0%, rgba(136,115,89,0) 35%, rgba(136,115,89,0) 71%, rgba(136,115,89,0.2) 100%);

   -webkit-box-shadow: inset 0px -9px 39px 0px rgba(0,0,0,0.08);
   -moz-box-shadow: inset 0px -9px 39px 0px rgba(0,0,0,0.08);
   box-shadow: inset 0px -9px 39px 0px rgba(0,0,0,0.08);
}


/* LEFT */

.ot-letter-left span:before,
.ot-letter-left span:after {
	-webkit-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
}
.ot-letter-left span:before {
	-webkit-transform: scale(1.08,1) skew(0deg,1deg);
	-ms-transform: scale(1.08,1) skew(0deg,1deg);
	transform: scale(1.08,1) skew(0deg,1deg);
}
.ot-letter-left span:after {
	text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
	-webkit-transform: rotateY(-15deg);
	-ms-transform: rotateY(-15deg);
	transform: rotateY(-15deg);
}

.ot-letter-left.active-letter span:before {
	-webkit-transform: scale(0.85,1) skew(0deg,20deg);
	-ms-transform: scale(0.85,1) skew(0deg,20deg);
	transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:before, .ot-letter-left a:focus ~ span:before {
	-webkit-transform: scale(0.4,1) skew(0deg,10deg) translateX(0.1em);
	-ms-transform: scale(0.4,1) skew(0deg,10deg) translateX(0.1em);
	transform: scale(0.4,1) skew(0deg,10deg) translateX(0.1em);
}

.ot-letter-left.active-letter span:after {
	-webkit-transform: rotateY(-40deg);
	-ms-transform: rotateY(-40deg);
	transform: rotateY(-40deg);
}
.ot-letter-left:hover span:after, .ot-letter-left a:focus ~ span:after {
	-webkit-transform: rotateY(-77deg) translateX(0.2em);
	-ms-transform: rotateY(-77deg) translateX(0.2em);
	transform: rotateY(-77deg) translateX(0.2em);
}

/* RIGHT */
.ot-letter-right span:before,
.ot-letter-right span:after {
	-webkit-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}
.ot-letter-right span:before {
	-webkit-transform: scale(0.85,1) skew(0deg,1deg);
	-ms-transform: scale(0.85,1) skew(0deg,1deg);
	transform: scale(0.85,1) skew(0deg,1deg);
}
.ot-letter-right span:after {
	text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
	-webkit-transform: rotateY(15deg);
	-ms-transform: rotateY(15deg);
	transform: rotateY(15deg);
}

.ot-letter-right.active-letter span:before {
	-webkit-transform: scale(0.85,1) skew(0deg,-20deg);
	-ms-transform: scale(0.85,1) skew(0deg,-20deg);
	transform: scale(0.85,1) skew(0deg,-20deg);
}
.ot-letter-right:hover span:before, .ot-letter-right a:focus ~ span:before {
	-webkit-transform: scale(0.2,1) skew(0deg,-10deg);
	-ms-transform: scale(0.2,1) skew(0deg,-10deg);
	transform: scale(0.2,1) skew(0deg,-10deg);
}

.ot-letter-right.active-letter span:after {
	-webkit-transform: rotateY(40deg);
	-ms-transform: rotateY(40deg);
	transform: rotateY(40deg);
}
.ot-letter-right:hover span:after, .ot-letter-right a:focus ~ span:after {
	-webkit-transform: rotateY(80deg);
	-ms-transform: rotateY(80deg);
	transform: rotateY(80deg);
}

/* UP - TOP */
.ot-letter-top span:before,
.ot-letter-top span:after {
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
.ot-letter-top span:before {
	-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
	-ms-transform: scale(1,0.95) skew(-4deg,0deg);
	transform: scale(1,0.95) skew(-4deg,0deg);
}
.ot-letter-top span:after {
	text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
	-webkit-transform: rotateX(-15deg);
	-ms-transform: rotateX(-15deg);
	transform: rotateX(-15deg);
}

.ot-letter-top.active-letter span:before {
	-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
	-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
	transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}
.ot-letter-top:hover span:before, .ot-letter-top a:focus ~ span:before {
	-webkit-transform: translateY(-0.10em) scale(1,0.15) skew(-8deg,0deg);
	-ms-transform: translateY(-0.10em) scale(1,0.15) skew(-8deg,0deg);	
	transform: translateY(-0.10em) scale(1,0.15) skew(-8deg,0deg)
}

.ot-letter-top.active-letter span:after {
	-webkit-transform: translateY(-0.035em) rotateX(-40deg);
	-ms-transform: translateY(-0.035em) rotateX(-40deg);
	transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-top:hover span:after, .ot-letter-top a:focus ~ span:after {
	-webkit-transform: translateY(-0.9em) rotateX(-80deg);
	-ms-transform: translateY(-0.9em) rotateX(-80deg);
	transform: translateY(-0.09em) rotateX(-80deg);
}

/* DOWN - BOTTOM */
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
	-webkit-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
	-webkit-transform: scale(1,1.05) skew(4deg,0deg);
	-ms-transform: scale(1,1.05) skew(4deg,0deg);
	transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
	text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
	-webkit-transform: rotateX(15deg);
	-ms-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

.ot-letter-bottom.active-letter span:before {
	-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
	-ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
	transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:before, .ot-letter-bottom a:focus ~ span:before, .ot-letter-bottom a:focus span:before {
	-webkit-transform: translateY(0.1em) scale(1,0.2) skew(10deg,0deg);
	-ms-transform: translateY(0.1em) scale(1,0.2) skew(10deg,0deg);
	transform: translateY(0.1em) scale(1,0.2) skew(10deg,0deg);
}

.ot-letter-bottom.active-letter span:after {
	-webkit-transform: translateY(0.045em) rotateX(40deg);
	-ms-transform: translateY(0.045em) rotateX(40deg);
	transform: translateY(0.045em) rotateX(40deg);
}
.ot-letter-bottom:hover span:after, .ot-letter-bottom a:focus ~ span:after, .ot-letter-bottom a:focus span:after {
	-webkit-transform: translateY(0.1em) rotateX(80deg);
	-ms-transform: translateY(0.1em) rotateX(80deg);
	transform: translateY(0.1em) rotateX(80deg);
}


/* For smaller mobile screens */
	.grid li.icons {
		width: 25%;
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
		overflow: hidden;
	}
	.grid.main li.icons {
		width: 100%;
		grid-column: span 4;
	}
	.grid.main li.icons.row4 {
		grid-column: span 3;
	}
	
	.grid li span.iconcir {
		width:60px;
		height:60px;
		font-size: 0.46em;
    	line-height: 1.9em;
	}
	.subpage .grid li span.iconcir {
		transform: scale(0.5);	
		margin-bottom: -10%;
	}	


	.grid li.icons.letter-space {
		max-width:0%;
	}
	.grid li.icons.arrow {
		width:100%;
		margin-top:0%;
	}
	.grid li.icons a p:not(.more) { opacity:1; }
	
	.grid li.icons a p {
		font-size: .19em;
    	margin: -3px 0 15px;
		white-space:nowrap;
		-webkit-transition: all .5s;
		transition: all .5s;
	}


/* For tablets */
@media screen and (min-width: 870px) {
	.featured-grid-container {
		max-width:780px;
	}
	.grid li {
		font-size: 10em;
		line-height: 1;
		width: 16.66666%;
		width: -webkit-calc(100% / 6);
		width: calc(100% / 6);
	}
	.grid li.letter-space {
		max-width:8%;
	}
	.grid li.max-width-curn {
		max-width:13% 
	}
	.grid li span.iconcir {
		width:80px;
		height:80px;
		font-size: 0.6em;
    	line-height: 1.9em;
	}
	
	.grid li.icons a p:not(.more) { opacity:1; }
	.grid li.icons a:hover p, .grid li.icons a:hover { opacity:1; text-decoration:none; }
	
	.grid li.icons a p {
		font-size: .25em;
    	margin: -3px 0 15px;
		white-space:nowrap;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	
}


/* For smaller desktops 
@media screen and (min-width: 1300px) {
	.featured-grid-container {
		max-width:1300px;
		margin:10% auto 0;
	}
	.grid li {
		font-size: 10em;
		line-height: 1.5;
		width: 9.090909%;
		width: -webkit-calc(100% / 12);
		width: calc(100% / 12);
	}
	.grid li.letter-space {
		max-width:9.090909%;
	}
	.grid li.max-width-curn {
		max-width:6%
	}
	
}
*/

@media screen and (min-height: 840px) and (max-width: 1750px) {
	#splash .featured-grid-container {
		margin-top: 10%;
	}
}

@media screen and (min-width: 1750px) {
	.featured-grid-container {
		max-width:1750px;
		margin:10% auto 0;
	}
	@media screen and (max-height: 840px) {
		#splash .featured-grid-container {
			margin-top: 1%;
		}
	}
	.grid li {
		font-size: 14em;
		line-height: 1;
		width: 9.090909%;
		width: -webkit-calc(100% / 12);
		width: calc(100% / 12);
	}
	.grid li.letter-space {
		max-width:9.090909%;
	}
	.grid li.max-width-curn {
		max-width:6%
	}
	
	.grid li.icons {
		width: 16.66666%;
		width: -webkit-calc(100% / 6);
		width: calc(100% / 6);
		margin-top:5%;
	}
	.grid li.icons.letter-space {
		max-width:9.090909%;
	}
	
	.grid li span.iconcir {
		width:80px;
		height:80px;
		font-size: 0.6em;
    	line-height: 1.9em;
	}
	
	.grid li.icons a p:not(.more) { opacity:1; }
	.grid li.icons a:hover p, .grid li.icons a:hover { opacity:1; text-decoration:none; }
	
	.grid li.icons a p {
		font-size: .25em;
    	margin: -3px 0 15px;
		white-space:nowrap;
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	
}


/* ALL from when page loads */
.pf-letter-start.ot-letter-left span:before, .pf-letter-start.ot-letter-left span:after,
.pf-letter-start.ot-letter-right span:before, .pf-letter-start.ot-letter-right span:after,
.pf-letter-start.ot-letter-top span:before, .pf-letter-start.ot-letter-top span:after {
	-webkit-transform: scale(1,1) skew(0deg,0deg) rotateY(0deg) rotateX(0deg);
	-ms-transform: scale(1,1) skew(0deg,0deg) rotateY(0deg) rotateX(0deg);
	transform: scale(1,1) skew(0deg,0deg) rotateY(0deg) rotateX(0deg);
	text-shadow: 0px 0px 0px hsla(360, 100%, 100%, 0), 0px 0px 0px hsla(0, 0%, 0%, 0);
	-webkit-transition: all 25s;
	transition: all 25s;
}
.pf-letter-start.ot-letter-bottom span:after {
	text-shadow: 0px 0px 0px hsla(360, 100%, 100%, 0), 0px -3px 0px hsla(0, 0%, 0%, 0);
	-webkit-transform: rotateX(3deg);
	-ms-transform: rotateX(3deg);
	transform: rotateX(3deg);
}
.pf-letter-start.ot-letter-bottom span:before {
	-webkit-transform: scale(1,1) skew(0deg,0deg);
	-ms-transform: scale(1,1) skew(0deg,0deg);
	transform: scale(1,1) skew(0deg,0deg);
}


svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
}