#glyphs.panel-padded, #glyphs.panel-padded-alert {
			padding: 10px 10px 5px 10px;
		}

	.border {
		border-bottom: 1px solid #000;
	}
		
	.font-panel, .panel, .panel-padded {
		margin: 0;
		padding: 0;
		position: relative;
	}
	.font-panel-alert, .panel-alert, .panel-padded-alert {
		margin: 0;
		padding: 0;
		background: #ffc47e;
		position: relative;
	}

	/*** added 8 March 2017 ***/
	/*
	.alert {
		margin: 0 0 0 45px;
		padding: 13px 0;
	}
	.alert::before {
		margin: 0;
		padding: 0 5px 0 0;
		font-family: 'jttypefont';
		content: "!";
		font-size: 30px;
		font-weight: 300;
		vertical-align: middle;
		color: #000;
		position: absolute;
		top: 20px;
		left: 15px;
		z-index: 10;
	}
	.alert::after {
		margin: 0;
		padding: 0;
		font-family: 'pemw-rg' !important;
		content: "";
		font-size: 24px;
		font-weight: 300;
		vertical-align: middle;
		width: 26px;
		height: 26px;
		border-radius: 13px;
		background-color: #fff;
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 5;
	}*/				
	/*** end 8 March 2017 additions ***/

	div.close-panel {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 30px;
		position: relative;
	}

		.font-panel .close-btn, 
		.panel .close-btn,
		.panel-padded .close-btn,
		.panel .nested-close-btn,
		.panel-padded .nested-close-btn {
			margin: 10px 0 0 0;
			padding: 0;
			position: absolute;
			bottom: 0px;
			right: 0px;
			/*float: right;*/
			font-family: jttypefont;
			color: #000;
			font-size: 20px;
			line-height: 30px;
			/*width: 100%;*/
			cursor: pointer;
		}
		.panel .nested-close-btn,
		.panel-padded .nested-close-btn {
			position: relative;
			float: right;
		}
			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				margin-right: 5px;
				font-family: 'pemw-rg' !important;
				font-size: 16px;
				cursor: pointer;
			}
	
	span.heading {
		margin: 10px auto 5px auto !important; 
		padding: 0;
		text-align: center !important;
		width:100%;
		display: inline-block;
	}		


	.font-panel {
		margin: 20px 20px 0 0;
		width: auto;
		display: block;
		float: left;
	}
		.font-panel:hover {
			background: #fff;
		}
	
	.font-panel div {
		padding: 0px;
	}
	.font-panel a {
		color: #000;
	}
		.font-panel:hover a,
		.font-panel a:hover {
			color: #000;
		}



/* sample text not selectable */
.sample {
	/*-webkit-user-select: none;  Chrome/Safari */        
	/*-moz-user-select: none;  Firefox */
	/*-ms-user-select: none;  IE10+ */
	padding:10px;
}

/*** all caps ***/
.ot-fs14 {
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"case" 1, "kern", "lnum" 1, "calt", "locl";
	-ms-font-feature-settings:"case" 1, "kern", "lnum" 1, "calt", "locl";
	-o-font-feature-settings:"case" 1, "kern", "lnum" 1, "calt", "locl";
	-webkit-font-feature-settings:"case" 1, "kern", "lnum" 1, "calt", "locl";
	font-feature-settings:"case" 1, "kern", "lnum" 1, "calt", "locl";
}

/*** small caps ***/
.ot-fs1 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"smcp" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"smcp" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"smcp" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"smcp" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"smcp" 1, "kern", "liga", "calt", "locl";
  }

/*** all small caps ***/
.ot-fs2 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"smcp" 1, "c2sc" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"smcp" 1, "c2sc" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"smcp" 1, "c2sc" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"smcp" 1, "c2sc" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"smcp" 1, "c2sc" 1, "kern", "liga", "calt", "locl";
}

/*** discretionary ligatures ***/
.ot-fs3 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"dlig" 1, "kern", "liga", "calt", "locl", "locl";
	-ms-font-feature-settings:"dlig" 1, "kern", "liga", "calt", "locl", "locl";
	-o-font-feature-settings:"dlig" 1, "kern", "liga", "calt", "locl", "locl";
	-webkit-font-feature-settings:"dlig" 1, "kern", "liga", "calt", "locl", "locl";
	font-feature-settings:"dlig" 1, "kern", "liga", "calt", "locl", "locl";
}

/*** swashes ***/
.ot-fs4 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"swsh" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"swsh" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"swsh" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"swsh" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"swsh" 1, "kern", "liga", "calt", "locl";
}

/*** discretionary ligatures & swashes ***/
.ot-fs5 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"dlig" 1, "swsh" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"dlig" 1, "swsh" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"dlig" 1, "swsh" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"dlig" 1, "swsh" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"dlig" 1, "swsh" 1, "kern", "liga", "calt", "locl";
}

/*** stylistic alternates ***/
.ot-fs6 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"salt" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"salt" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"salt" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"salt" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"salt" 1, "kern", "liga", "calt", "locl";
}

/*** stylistic alternates & sets - update 03.05.2018 - do not use fs6 above ***/
.ot-fs13 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"salt", "kern", "liga", "calt", "locl", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16", "ss17", "ss18", "ss19", "ss20";
	-ms-font-feature-settings:"salt", "kern", "liga", "calt", "locl", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16", "ss17", "ss18", "ss19", "ss20";
	-o-font-feature-settings:"salt", "kern", "liga", "calt", "locl", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16", "ss17", "ss18", "ss19", "ss20";
	-webkit-font-feature-settings:"salt", "kern", "liga", "calt", "locl", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16", "ss17", "ss18", "ss19", "ss20";
	font-feature-settings:"salt", "kern", "liga", "calt", "locl", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "ss07", "ss08", "ss09", "ss10", "ss11", "ss12", "ss13", "ss14", "ss15", "ss16", "ss17", "ss18", "ss19", "ss20";
}

/*** old style figures ***/
.ot-fs7 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"onum" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"onum" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"onum" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"onum" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"onum" 1, "kern", "liga", "calt", "locl";
}

/*** lining figures ***/
.ot-fs8 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"lnum" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"lnum" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"lnum" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"lnum" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"lnum" 1, "kern", "liga", "calt", "locl";
}

/*** superiors ***/
.ot-fs9, sup {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"sups" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"sups" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"sups" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"sups" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"sups" 1, "kern", "liga", "calt", "locl";
}

/*** inferiors ***/
.ot-fs10 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"sinf" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"sinf" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"sinf" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"sinf" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"sinf" 1, "kern", "liga", "calt", "locl";
}

/*** fractions ***/
.ot-fs11 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"frac" 1, "kern", "liga", "calt", "locl";
	-ms-font-feature-settings:"frac" 1, "kern", "liga", "calt", "locl";
	-o-font-feature-settings:"frac" 1, "kern", "liga", "calt", "locl";
	-webkit-font-feature-settings:"frac" 1, "kern", "liga", "calt", "locl";
	font-feature-settings:"frac" 1, "kern", "liga", "calt", "locl";
}

/*** alternate fractions ***/
/*.ot-fs12 {
	-moz-font-feature-settings:"frac", "afrc", "ss01" 1;
	-ms-font-feature-settings:"frac", "afrc", "ss01" 1;
	-o-font-feature-settings:"frac", "afrc", "ss01" 1;
	-webkit-font-feature-settings:"frac", "afrc", "ss01" 1;
	font-feature-settings:"frac", "afrc", "ss01" 1;
}*/

/*** updated 06.11.2016 ***/
.ot-fs12 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"afrc" 1, "kern", 'liga', "calt", "locl";
	-ms-font-feature-settings:"afrc" 1, "kern", 'liga', "calt", "locl";
	-o-font-feature-settings:"afrc" 1, "kern", 'liga', "calt", "locl";
	-webkit-font-feature-settings:"afrc" 1, "kern", 'liga', "calt", "locl";
	font-feature-settings:"afrc" 1, "kern", 'liga', "calt", "locl";
}

/*** barless fractions - added 30 April 2019 ***/
.ot-fs15 {
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings:"frac" 1, "kern", 'liga', "calt", "locl", "ss02" 1;
	-ms-font-feature-settings:"frac" 1, "kern", 'liga', "calt", "locl", "ss02" 1;
	-o-font-feature-settings:"frac" 1, "kern", 'liga', "calt", "locl", "ss02" 1;
	-webkit-font-feature-settings:"frac" 1, "kern", 'liga', "calt", "locl", "ss02" 1;
	font-feature-settings:"frac" 1, "kern", 'liga', "calt", "locl", "ss02" 1;
}



.input {
	background-color: transparent;
	border:none !important;
	outline:none !important;
	/*margin: 0 0 0 -25px !important;
	padding: 10px 10px 10px 25px !important;*/
	margin: 0 0 0 -10px !important;
	padding: 7px 7px 9px 7px;
	width: 100%;overflow:hidden;
	white-space: nowrap;    
}

	#test-field .input { padding: 7px 15px 7px 5px !important; }

	/* new create type input */
	#test-field2 .input { 
		margin: 10px 0 !important;
		padding: 7px 0px 7px 0px !important; 
	}

	
[contenteditable="true"]:active,
[contenteditable="true"]:focus {
	border:none !important;
	outline:none !important;
}

/* updated 15 Feb 2017 - Brian */
.x-small-test, .thirtySix {font-size: 36px;}
.small-test, .fortyEight {font-size: 48px;}
.regular-test, .sixtyFour {font-size: 64px;}
.large-test, .ninetySix {font-size: 96px;}
.x-large-test, .oneTwentyEight {font-size: 128px;}
.super-test, .oneSeventyTwo {font-size: 172px;}
.ultra-test, .twoFiftySix {font-size: 256px;}


.note-label, .note-label-two {
	width: 100%;
	background-color: rgb(213, 233, 233);
	margin-top: 6px;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: -10px;
	padding: 19px 10px;
}

.note-label:empty { display: none }
.note-label:not(:empty) { display: block }

picture img {
	/*width: 95%;*/
	width: 100%;
}


#title-panel div h1 {
	font-size: 48px !important;
	line-height: 50px !important;
}


/*** 2 columns text under image slider on publication pages ***/
#general-panel .padded.publications .leftColumn {
	margin: 0;
	padding: 0;
	/*padding-right:60px;*/
	width:45%;
	float:left;
}
#general-panel .padded.publications .rightColumn {
	margin: 0;
	padding: 0;
	/*padding-right:60px;*/
	width:45%;
	float:left;
}


.downloads {
	background: #d5e9e9;	
}
.downloads p {
	background: #bfdadb;
}
.downloads .description {
	background: #a4cdce !important;
}
.downloads .description p {
	background: none !important;
}

	.downloads .active .description {
		background: #4a9496 !important;
	}
		.downloads .active .description p {
			color: #fff;
			background: none !important;
		}



#overlay {
    margin: 0 auto;
    padding: 0;
    position: relative;
	z-index: 2000 !important;
	top: 0px;
    /*display: block;*/
}
#overlay div {   
    right: -50%;
    width: 100%;
    /*height: 100%;*/
    height: 80%;
    text-align: left;
    vertical-align: middle;
    display: table;
}
	#overlay div p {
    	height: 100%;
		text-align: left;
		vertical-align: middle;
		display: table-cell;
	}
	#overlay div picture {padding: 0;}
	
	#overlay div picture img {
		width: 100%;
		height: auto;
	}

	#overlay #fvpp-close {
		display: none !important;
	}			



	/*** new font flash ***/
	
	
	/*** banner tile ***/
	.banner-new {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		font-family: 'pemw-rg' !important;
		font-size: 14px;
		color: #fff;
		line-height: 40px;
		text-align: center;
		background: #fd5c24;
		position: absolute;
		bottom: 45px;
		left: 10px;
		z-index: 9999;
	}	
	
	/*** regular tiles ***/
	.new {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		font-family: 'pemw-rg' !important;
		font-size: 14px;
		color: #fff;
		line-height: 40px;
		text-align: center;
		background: #fd5c24;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 9999;
	}	
	





.sub-nav li a p {
	display: block;
}

#mobile-nav {
	margin: 0;
	padding:0;
	display:none;
}
	#mobile-nav ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		text-align: right;
	}
	  #mobile-nav ul li {
		  margin: 0;
		  padding: 0;float:none;
	  }
	  	#mobile-nav ul li a {
			margin: 0;
			padding: 10px 15px 10px 12px;
			background: #000;
			color: #fff;
			font-size: 15px;
			line-height: 35px;
			text-decoration: none !important;
		}


/*** moved out of responsive as applies to all ***/
span.same-line.addedSpace,
span.wrap-line.addedSpace { margin-right: 6px; }

/*** below used when equals sign appears immediately after - smaller space ***/
span.same-line.addedHalfSpace,
span.wrap-line.addedHalfSpace { margin-right: 3px; }


	div.two div.strapline p,
	div.one div.strapline p {
		font-size: 14px;
		line-height: 16px;
	}

	div.two div.buy p,
	div.one div.buy p,
	div.two div.view p,
	div.one div.view p,
	div.two div.description p,
	div.one div.description p {
		font-size: 15px;
		line-height: 17px;
	}
		div.two div.description p,
		div.one div.description p {
			font-size: 15px;
			line-height: 17px;
		}

#gallery-panel {
	margin-top: 20px;
}

/**** responsive ****/

/* Desktops and iPads (landscape) */
@media only screen and (min-width : 980px) and (max-width: 1359px) {

	#overlay {
		width: 960px;
		height: -moz-calc(100% - 150px) !important;
		height: -webkit-calc(100% - 150px) !important;
		height: calc(100% - 150px) !important;
	}
		#overlay div picture img {
			max-width: 960px;
		}

	#toggle-menu, #mobile-nav, #menu {display:none;}
		
	.header,
	.footer, 
	#banner-panel,
	#fontlist-panel,
	#gallery-panel,
	#info-panel, 
	#buy-panel,
	#related-panel, 
	#title-panel,
	#order-panel,
	#publicationslist-panel,
	#general-panel, #general-panel2, #general-panel3, 
	#main-accordion, 
	#secondary-accordion, 
	#contact, 
	.rowContainer, 
	.panel {
		width: 960px;
	}

	.header {
		/*padding-bottom:20px !important;*/
	}
	
		.header .logo {
			margin: 0;
			padding: 17px 140px 17px 15px;
			background: #000;
			height: auto;
			float: left;
		}
			.header .logo img {
				width: auto;
				height: 40px;
			}

		.footer ul.sub-nav li a p {
			padding: 15px 15px 30px 0;
		}
		.footer ul.sub-nav li.right p {
			padding: 15px 0 30px 0;
		}

		.panel-padded, .panel-padded-alert {
			width: 940px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 20px;
	}
	#info-panel {
		margin-top: 20px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 20px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 20px;
	}

	#title-panel {
		margin-top: 20px;
	}
	
	#general-panel, #general-panel2, #general-panel3, {
		margin-top: 0px;
	}
	
		/*** accordion inside a panel ***/
		#general-panel .panel,
		#general-panel2 .panel,
		#general-panel3 .panel {
			margin: 0;
			padding: 0 10px;
			width: 940px;
		}
			#general-panel .panel div,
			#general-panel2 .panel div,
			#general-panel3 .panel div {
				margin-top: 0px;
				margin-bottom: 10px;
				
			}
				#general-panel .panel div p,
				#general-panel2 .panel div p,
				#general-panel3 .panel div p {
					margin-top: -5px;
				}

	#order-panel {
		padding-bottom: 20px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}

	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:39px;vertical-align:middle;}
		.opt-ins span.same-line {line-height:42px;vertical-align:middle;}
	span.same-line.reducedLineHeight {/*** not needed at this resolution ***/}
	span.wrap-line {display:inline-block;line-height:39px;vertical-align:middle;}
		.opt-ins span.wrap-line {display:inline-block;line-height:42px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button {margin-left:0px;margin-top: 0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button {margin-left:0px; margin-top: 0px; margin-bottom: 0px;}

	span.wrap-line button.pure-button { margin-top: 0px; }


	.tab-content {
		padding-bottom: 20px;
	}
	
	/* total 5 tiles wide */
	ul.gridder li.gridder-list {
		width: 176px;
		height: 180px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		width: 372px;
		height: 180px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 568px;
			height: 180px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 764px;
			height: 180px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 960px;
			height: 180px;
		}
		
			ul.gridder li div.one {
				height: 180px;
			}

		div.static { height: 180px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -55%);
			height: 55%;
		}	

		
				
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 960px;
			height: 279px; /* height of 243 plus caption @ 36px */
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 279px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 66px;
		line-height: 100px;
	}
		ul#related li div.title p {
			font-size: 66px;
			line-height: 100px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 66px;
				line-height: 116px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 66px;
					line-height: 116px;
				}


	
	picture {padding: 0 10px;}
				
	picture img {
		width: 920px;
	}
	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 960px;
		vertical-align: bottom;
	}
	
	/* for font examples */
	.royalSlider {
		width: 960px !important;
		height: 390px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: 0 !important;
			padding: 0;
			width: 960px !important;
			height: 358px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 960px !important;
				height: 332px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: 0 !important;
					padding: 0;
					width: 960px !important;
					height: 332px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; } /* half of padding .rsSlide img inside rs-default.css */


	#title-panel div h1 {
		font-size: 48px !important;
		line-height: 50px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 372px;
		height: 180px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		padding-right: 60px;
		width: 40%;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: 0;
		padding-right: 60px;
		width: 40%;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 20%;
			width: 25%;
			float: left;
		}
		.columns .rightColumn {
			margin-top: 0;
			padding-right: 20%;
			width: 25%;
			float: right;
		}


	.downloads {
		margin: 0;
		padding: 0;
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 176px;
		height: 180px;
		overflow: hidden
	}
		.downloads ul.gridder li.gridder-list img {
			width: 176px;
			/*height: 180px;*/
			height: auto;
			overflow: hidden;
		}

/*** licensing content layout ***/
	ul.accordion2 li a p,
	ul.accordion2 li.active a p {
		/*margin-left: 5px;*/
		padding-left: 18%;
		padding-right: 18%;
	}
	ul.accordion2 li div.inner p {
	  /*margin-left: 5px;*/
	  padding: 0 18%;
	}
	ul.accordion2 li div.inner.show p {
	  /*margin-left: 5px;*/
	  padding: 0 18%;
	}

	.tab-content ol, .tab-content p {
		padding: 0 18%;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 20%;
		width: 60%;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 18px 0;
			padding-left: 18%;
			width: 32%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 18px 0;
			padding-right: 18%;
			width: 32%;
		}

/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 18%;
		padding-right: 18%;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 30%;
		padding: 20px 20px 20px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 30%;
		padding: 20px 20px 20px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 30%;
		padding: 20px 20px 20px 0;
		float: left;
	}

		#general-panel div.padded.sitemap {
			margin: 0;
			padding: 0 15% 10px 20%;
		}
			#general-panel .padded.sitemap .leftColumn {
				/*margin-left: 5px;*/
				width: 33%;
				padding: 20px 0 0 0;
				float: left;
			}
			#general-panel .padded.sitemap .middleColumn {
				/*margin-left: 5px;*/
				width: 34%;
				padding: 20px 0 0 0;
				float: left;
			}
			#general-panel .padded.sitemap .rightColumn {
				/*margin-left: 5px;*/
				width: 33%;
				padding: 20px 0 0 0;
				float: left;
			}

	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.lessThan4 {
		margin-left: 250px !important;
	}
	
}


/**** mobile layout - 320px ****/
	@media only screen and (max-width: 479px) {

	#overlay {
		width: 300px;
		height: -moz-calc(100% - 75px) !important;
		height: -webkit-calc(100% - 75px) !important;
		height: calc(100% - 75px) !important;
	}
		#overlay div picture img {
			max-width: 300px;
		}
	
	/*#background {display:none !important;}*/
	
	.header {
		background: #000;
		height:55px !important;
	}
		.header .logo {
			padding: 12px 15px 12px 10px;
			height: auto;
		}
			.header .logo img {
				width: auto;
				height: 26px;
			}

		.header .orderTotal p,
		.header .orderDesktop p,
		.header .orderWeb p,
		.header .orderApp p {
			padding: 10px 0 5px 10px;
			font-size: 16px;
			line-height: 32px;
			width:30px;
			text-align:right;
		}

		.header #orderIcon {
			padding: 10px 10px 5px 5px;
			width:20px;
			height: 30px;
		}

		.header #orderIcon div:after {
		  font-family: 'jttypefont';
		  content: "^";
		  font-size: 18px;
		  line-height: 0px;
		  vertical-align: top;
		  color: #fff;
		  background: transparent !important;
		  display:none;
		}
	
	ul.sub-nav {display: none;}
	
	.footer ul.sub-nav {display: block;}

	/* start mobile navigation */

	#mobile-nav {
		margin: 0;
		padding:0;
		display:none;
	}
		#mobile-nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
		}
		  #mobile-nav ul li {
			  margin: 0;
			  padding: 0;
			  float:none;
		  }
			#mobile-nav ul li a {
				margin: 0;
				padding: 10px 15px 10px 12px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}
		#mobile-nav ul li.parent-here:before, #mobile-nav ul li.here:before {
			font-family: 'jttypefont';
			content: "R";
			font-size: 18px;
			line-height: 28px;
			font-weight: 300;
			vertical-align: top;
			color: #000;
			background: transparent;
			padding-right: 5px;
		}
			#mobile-nav ul li.parent-here a, #mobile-nav ul li.here a {
				margin: 0;
				padding: 10px 15px 10px 8px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}

	/*** OLD ***/
	#toggle-menu {
		position: absolute;
		top: 23px;
		right: 10px;
		display: block;
	}

		#toggle-menu::after {
			  font-family: 'jttypefont';
			  content: "M";
			  font-size: 25px;
			  line-height: 0px;
			  vertical-align: top;
			  color: #fff;
			  background: transparent !important;
		}

	#menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 10; /* Make sure the z-index is lower than the #page */
	}

	#menu a {
		display: inline-block;
	}

	/* Animations */

	#page, #menu {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.menu-visible #menu {
		display: block;
	}

	.menu-visible.animating #menu {
		display: none;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .5s ease-in-out;
		-webkit-transition: -webkit-transform .5s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -200px, 0, 0 );
		-webkit-transform: translate3d( -200px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 200px, 0, 0 );
		-webkit-transform: translate3d( 200px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 200px;
	}

	/* end mobile navigation */
	
	/*#background {display:none;}*/
	
	body {
		height:100% !important; 
		/*background-color: #eeeae7;*/
		overflow: auto;
	}
		/*** used when disabling scrolling for progress overlay ***/
		body.no-scroll { 
			overflow: hidden; 
		}
		
	#page {
		height:100% !important;
	}
	
	.footer, #banner-panel, #fontlist-panel, #gallery-panel, #info-panel, #buy-panel, #related-panel, #title-panel, #order-panel, #publicationslist-panel, #general-panel, #general-panel2, #general-panel3, #main-accordion, #secondary-accordion, #contact, .rowContainer, .panel {
		width: 300px;
	}

#gallery-panel {
	margin-top: 10px;
}

		.footer ul.sub-nav li,
		.footer ul.sub-nav li.right {
			float:left;
			text-align: left;
			width: 100%;
		}		
			.footer ul.sub-nav li a p {
				padding: 15px 15px 0 0;
			}
			.footer ul.sub-nav li.right p {
				padding: 30px 0 20px 0;
			}
			
			
		.panel-padded, .panel-padded-alert {
			width: 280px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				display:none;
			}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 20px;
	}
	#info-panel {
		margin-top: 10px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 10px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 10px;
	}

	#title-panel {
		margin-top: 10px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 10px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}
	
	

	/* span before tab buttons */
	.tabs ul.horizontal span {
		margin-right: 5px;
	}

	/* spans for licence text */
	span.license-1 {
	}
	.pure-form .license-2 {
	
	}
	span.license-3 {
		/*margin-top: 5px;
		margin-bottom: 5px;
		width: 100% !important;*/
		display: block;
	}
	.pure-form fieldset select.web-license {
		margin-left: 0 !important;
		/*margin-top: 5px;
		display: block;*/
	}
	.pure-form fieldset button {
		/*margin-left: 0 !important;*/
	}
	
	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:24px;vertical-align:middle;}
	span.same-line.reducedLineHeight {line-height:24px !important;}
	span.wrap-line {display:block;line-height:24px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button { margin-left:0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button { margin-left:0px; margin-top: 5px; margin-bottom: 5px; }
		
	span.wrap-line button.pure-button { margin-top: 5px; }

	
	.tab-content {
		padding-bottom: 10px;
	}
		.tab-content p {
		
		}

	ul.gridder {
		margin-left: -10px;
	}

	/* total 2 tiles wide */
	ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
		width: 145px;
		height: 160px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		margin: 10px 0 0 10px;
		width: 300px;
		height: 160px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 300px;
			height: 160px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 300px;
			height: 160px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 300px;
			height: 160px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long,
			ul.gridder li div.two div.short, ul.gridder li div.two div.long {
				height: 160px;
			}

		div.static { height: 160px; }
		
		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -75%);
			height: 52%;
		}	

		
				
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 300px;
			height: 197px; /* height of 161 plus caption @ 36px */
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 197px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 55px;
		line-height: 75px;
	}
		ul#related li div.title p {
			font-size: 55px;
			line-height: 75px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 55px;
				line-height: 55px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 55px;
					line-height: 55px;
				}



	/*picture {padding: 0 10px;}*/
				
	picture img {
		width: 280px;
	}
	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 300px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 300px !important;
		height: 206px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: -65px !important;
			padding: 0;
			width: 430px !important;
			height: 160px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 300px !important;
				height: 148px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: -91px !important;
					padding: 0;
					width: 482px !important;
					height: 148px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	#slider-prev, #slider-next {
		display: none !important;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; display:none !important;} /* half of padding .rsSlide img inside rs-default.css */


	#title-panel div h1 {
		font-size: 30px !important;
		line-height: 32px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 300px;
		height: 160px;
	}

	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		width: 280px;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: -12px !important;
		width: 280px;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10px;
			padding-right: 10px;
			width: 280px;
			float: left;
		}
		.columns .rightColumn {
			margin-top: -12px !important;
			padding-left: 10px;
			padding-right: 10px;
			width: 280px;
			float: left;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder {
		padding-bottom: 10px;
	}

	.downloads ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 145px;
		height: 160px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 145px;
			/*height: 160px;*/
			height: auto;
			overflow: hidden;
		}
	

/*** licensing content layout ***/
	ul.accordion2 li.active a p {
		margin-left: 10px;
		padding-left: 0;
		padding-right: 10px;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}

	.tab-content ol, .tab-content p {
		padding: 0 10px;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10px;
		width: 280px;*/
		margin: 18px 0;
		width: 300px;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10px;
			width: 55%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10px;
			width: 40%;
		}

/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 0px;
		padding-right: 0px;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 20px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}



}

/**** mobile layout - 480px ****/
@media only screen and (min-width: 480px) and (max-width: 767px)  {

	#overlay {
		width: 458px;
		height: -moz-calc(100% - 75px);
		height: -webkit-calc(100% - 75px);
		height: calc(100% - 75px);
	}
		#overlay div picture img {
			max-width: 458px;
		}

	.header {
		background: #000;
		height:55px !important;
	}
		.header .logo {
			padding: 10px 65px 10px 10px;
			height: auto;
		}
			.header .logo img {
				width: auto;
				height: 30px;
			}

		.header .orderTotal p,
		.header .orderDesktop p,
		.header .orderWeb p,
		.header .orderApp p {
			padding: 10px 0 5px 10px;
			font-size: 16px;
			line-height: 32px;
			width:30px;
			text-align:right;
		}

		.header #orderIcon {
			padding: 10px 10px 5px 5px;
			width:20px;
			height: 30px;
		}

		.header #orderIcon div:after {
		  font-family: 'jttypefont';
		  content: "^";
		  font-size: 18px;
		  line-height: 0px;
		  vertical-align: top;
		  color: #fff;
		  background: transparent !important;
		  display:none;
		}
	
	ul.sub-nav {display:none;}
	
	.footer ul.sub-nav {display: block;}

	/* start mobile navigation */

	#mobile-nav {
		margin: 0;
		padding:0;
		display:none;
	}
		#mobile-nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
		}
		  #mobile-nav ul li {
			  margin: 0;
			  padding: 0;float:none;
		  }
			#mobile-nav ul li a {
				margin: 0;
				padding: 10px 15px 10px 12px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}
		#mobile-nav ul li.parent-here:before, #mobile-nav ul li.here:before {
			font-family: 'jttypefont';
			content: "R";
			font-size: 18px;
			line-height: 28px;
			font-weight: 300;
			vertical-align: top;
			color: #000;
			background: transparent;
			padding-right: 5px;
		}
			#mobile-nav ul li.parent-here a, #mobile-nav ul li.here a {
				margin: 0;
				padding: 10px 15px 10px 8px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}

	/*** OLD ***/

	#toggle-menu {
		position: absolute;
		top: 23px;
		right: 10px;
		display: block;
	}

		#toggle-menu::after {
			  font-family: 'jttypefont';
			  content: "M";
			  font-size: 25px;
			  line-height: 0px;
			  vertical-align: top;
			  color: #fff;
			  background: transparent !important;
		}

	#menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 10; /* Make sure the z-index is lower than the #page */
	}

	#menu a {
		display: inline-block;
	}

	/* Animations */

	#page, #menu {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.menu-visible #menu {
		display: block;
	}

	.menu-visible.animating #menu {
		display: none;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .5s ease-in-out;
		-webkit-transition: -webkit-transform .5s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -200px, 0, 0 );
		-webkit-transform: translate3d( -200px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 200px, 0, 0 );
		-webkit-transform: translate3d( 200px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 200px;
	}

	/* end mobile navigation */

	/*#background {display:none;}*/
	
	body {
		height:100% !important; 
		/*background-color: #eeeae7;*/
		overflow:auto;
	}
	#page {
		height:100% !important;
	}
	
	.footer, #banner-panel, #fontlist-panel, #gallery-panel, #info-panel, #buy-panel, #related-panel, #title-panel, #order-panel, #publicationslist-panel, #general-panel, #general-panel2, #general-panel3, #main-accordion, #secondary-accordion, #contact, .rowContainer, .panel {
		width: 458px;
	}

#gallery-panel {
	margin-top: 10px;
}

		.footer ul.sub-nav li,
		.footer ul.sub-nav li.right {
			float: left;
			text-align: left;
			width: 100%;
		}		
			.footer ul.sub-nav li a p {
				padding: 15px 15px 0 0;
			}
			.footer ul.sub-nav li.right p {
				padding: 30px 0 20px 0;
			}
		
		.panel-padded, .panel-padded-alert {
			width: 438px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				display:none;
			}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	#info-panel {
		margin-top: 10px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 10px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 10px;
	}

	#title-panel {
		margin-top: 10px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 10px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}
	
	

	/* span before tab buttons */
	.tabs ul.horizontal span {
		margin-right: 5px;
	}

	/* spans for licence text */
	span.license-1 {
	}
	.pure-form .license-2 {
	
	}
	span.license-3 {
		/*margin-top: 5px;
		margin-bottom: 5px;
		width: 100% !important;*/
		display: block;
	}
	.pure-form fieldset select.web-license {
		margin-left: 0 !important;
		/*margin-top: 5px;*/
		/*display: block;*/
	}
	.pure-form fieldset button {
		/*margin-left: 0 !important;*/
	}
	
	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:24px;vertical-align:middle;}
	span.same-line.reducedLineHeight {line-height:24px !important;}
	span.wrap-line {display:block;line-height:24px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button { margin-left:0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button { margin-left:0px; margin-top: 5px; margin-bottom: 5px; }
		
	span.wrap-line button.pure-button { margin-top: 5px; }

	
	.tab-content {
		padding-bottom: 10px;
	}
		.tab-content p {
		
		}
	
	ul.gridder {
		margin-left: -10px;
	}

	/* total 2 tiles wide */
	ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
		width: 146px;
		height: 160px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		margin: 10px 0 0 10px;
		/*width: 302px;*/
		width: 458px;
		height: 160px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			/*width: 302px;*/
			width: 458px;
			height: 160px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			/*width: 302px;*/
			width: 458px;
			height: 160px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			/*width: 302px;*/
			width: 458px;
			height: 160px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 160px;
			}

		div.static { height: 160px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -75%);
			height: 52%;
		}	

		
				
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 458px;
			height: 227px; /* height of 191 plus caption @ 36px */
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 227px; }



	div.two div.static p,
	div.one div.tcycle p {
		font-size: 55px;
		line-height: 75px;
	}
		ul#related li div.title p {
			font-size: 55px;
			line-height: 75px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 55px;
				line-height: 55px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 55px;
					line-height: 55px;
				}



				
	/*picture {padding: 0 10px;}*/
				
	picture img {
		width: 438px;
	}

	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 458px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 458px !important;
		height: 280px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: -92px !important;
			padding: 0;
			width: 642px !important;
			height: 240px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 458px !important;
				height: 222px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: -102px !important;
					padding: 0;
					width: 662px !important;
					height: 222px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	#slider-prev, #slider-next {
		display: none !important;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; display:none !important;} /* half of padding .rsSlide img inside rs-default.css */


	#title-panel div h1 {
		font-size: 30px !important;
		line-height: 32px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 458px;
		height: 160px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		padding: 0;
		width: 418px;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: -12px !important;
		padding: 0;
		width: 418px;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10px;
			padding-right: 10px;
			width: 438px;
			float: left;
		}
		.columns .rightColumn {
			margin-top: -12px !important;
			padding-left: 10px;
			padding-right: 10px;
			width: 438px;
			float: left;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder {
		padding-bottom: 10px;
	}

	.downloads ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 146px;
		height: 160px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 146px;
			/*height: 160px;*/
			height: auto;
			overflow: hidden;
		}
	
	

/*** licensing content layout ***/
	ul.accordion2 li.active a p {
		margin-left: 10px;
		padding-left: 0;
		padding-right: 10px;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}

	.tab-content ol, .tab-content p {
		padding: 0 10px;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10px;
		width: 438px;*/
		margin: 18px 0;
		width: 458px;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10px;
			width: 55%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10px;
			width: 40%;
		}
/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 0px;
		padding-right: 0px;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 20px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}



}

/* iPhone 6 (portrait) */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {

	#overlay {
		width: 354px;
		height: -moz-calc(100% - 75px);
		height: -webkit-calc(100% - 75px);
		height: calc(100% - 75px);
	}
		#overlay div picture img {
			max-width: 354px;
		}

	.header {
		background: #000;
		height:55px !important;
	}
		.header .logo {
			padding: 12px 50px 12px 10px;
			height: auto;
		}
			.header .logo img {
				width: auto;
				height: 26px;
			}

		.header .orderTotal p,
		.header .orderDesktop p,
		.header .orderWeb p,
		.header .orderApp p {
			padding: 10px 0 5px 0px;
			font-size: 16px;
			line-height: 32px;
			width: 30px;
			text-align: right;
		}

		.header #orderIcon {
			padding: 10px 0px 5px 10px;
			width: 20px;
			height: 30px;
		}

		.header #orderIcon div:after {
		  font-family: 'jttypefont';
		  content: "^";
		  font-size: 18px;
		  line-height: 0px;
		  vertical-align: top;
		  color: #fff;
		  background: transparent !important;
		  display:none;
		}
	
	ul.sub-nav {display:none;}
	
	.footer ul.sub-nav {display: block;}

	/* start mobile navigation */

	#mobile-nav {
		margin: 0;
		padding:0;
		display:none;
	}
		#mobile-nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
		}
		  #mobile-nav ul li {
			  margin: 0;
			  padding: 0;float:none;
		  }
			#mobile-nav ul li a {
				margin: 0;
				padding: 10px 15px 10px 12px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}
		#mobile-nav ul li.parent-here:before, #mobile-nav ul li.here:before {
			font-family: 'jttypefont';
			content: "R";
			font-size: 18px;
			line-height: 28px;
			font-weight: 300;
			vertical-align: top;
			color: #000;
			background: transparent;
			padding-right: 5px;
		}
			#mobile-nav ul li.parent-here a, #mobile-nav ul li.here a {
				margin: 0;
				padding: 10px 15px 10px 8px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}

	/*** OLD ***/
	#toggle-menu {
		position: absolute;
		top: 23px;
		right: 10px;
		display: block;
	}

		#toggle-menu::after {
			  font-family: 'jttypefont';
			  content: "M";
			  font-size: 25px;
			  line-height: 0px;
			  vertical-align: top;
			  color: #fff;
			  background: transparent !important;
		}

	#menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 10; /* Make sure the z-index is lower than the #page */
	}

	#menu a {
		display: inline-block;
	}

	/* Animations */

	#page, #menu {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.menu-visible #menu {
		display: block;
	}

	.menu-visible.animating #menu {
		display: none;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .5s ease-in-out;
		-webkit-transition: -webkit-transform .5s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -200px, 0, 0 );
		-webkit-transform: translate3d( -200px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 200px, 0, 0 );
		-webkit-transform: translate3d( 200px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 200px;
	}

	/*** override black border at top ***/
	ul.accordion2 {
	  
	}


	/* end mobile navigation */

	
	/*#background {display:none;}*/
	
	body {
		height:100% !important; 
		background-color: #eeeae7;
		overflow:auto;
	}
	#page {
	}
	
	.footer, #banner-panel, #fontlist-panel, #gallery-panel, #info-panel, #buy-panel, #related-panel, #title-panel, #order-panel, #publicationslist-panel, #general-panel, #general-panel2, #general-panel3, #main-accordion, #secondary-accordion, #contact, .rowContainer, .panel {
		width: 354px;
	}

#gallery-panel {
	margin-top: 10px;
}

		.footer ul.sub-nav li,
		.footer ul.sub-nav li.right {
			float: left;
			text-align: left;
			width: 100%;
		}		
			.footer ul.sub-nav li a p {
				padding: 15px 15px 0 0;
			}
			.footer ul.sub-nav li.right p {
				padding: 30px 0 20px 0;
			}

		.panel-padded, .panel-padded-alert {
			width: 334px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				display:none;
			}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	#info-panel {
		margin-top: 10px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 10px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 10px;
	}

	#title-panel {
		margin-top: 10px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 10px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}
	
	
	
	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:24px;vertical-align:middle;}
	span.same-line.reducedLineHeight {line-height:24px !important;}
	span.wrap-line {display:block;line-height:24px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button { margin-left:0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button { margin-left:0px; margin-top: 5px; margin-bottom: 5px; }
		
	span.wrap-line button.pure-button { margin-top: 5px; }

	
	.tab-content {
		padding-bottom: 10px;
	}
		.tab-content p {
			max-width: 354px;
		}
	

	ul.gridder {
		margin-left: -10px;
	}

	/* total 2 tiles wide */
	ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
		width: 172px;
		height: 170px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		margin: 10px 0 0 10px;
		width: 354px;
		height: 170px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 354px;
			height: 170px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 354px;
			height: 170px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 354px;
			height: 170px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 170px;
			}

		div.static { height: 170px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -68%);
			height: 50%;
		}	

		
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 354px;
			height: 226px;
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 226px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 60px;
		line-height: 80px;
	}
		ul#related li div.title p {
			font-size: 60px;
			line-height: 80px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 60px;
				line-height: 70px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 60px;
					line-height: 70px;
				}


	/*picture {padding: 0 10px;}*/
				
	picture img {
		width: 334px;
	}

	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 354px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 354px !important;
		height: 224px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: -64px !important;
			padding: 0;
			width: 482px !important;
			height: 180px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 354px !important;
				height: 166px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: -64px !important;
					padding: 0;
					width:  482px !important;
					height: 166px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	#slider-prev, #slider-next {
		display: none !important;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; display:none !important;} /* half of padding .rsSlide img inside rs-default.css */

	
	#title-panel div h1 {
		font-size: 30px !important;
		line-height: 32px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 354px;
		height: 170px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		width: 334px;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: -12px !important;
		width: 334px;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10px;
			padding-right: 10px;
			width: 334px;
			float: left;
		}
		.columns .rightColumn {
			margin-top: -12px !important;
			padding-left: 10px;
			padding-right: 10px;
			width: 334px;
			float: left;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder {
		padding-bottom: 10px;
	}

	.downloads ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 172px;
		height: 170px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 172px;
			/*height: 160px;*/
			height: auto;
			overflow: hidden;
		}
	
/*** licensing content layout ***/
	ul.accordion2 li.active a p {
		margin-left: 10px;
		padding-left: 0;
		padding-right: 10px;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}

	.tab-content ol, .tab-content p {
		padding: 0 10px;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10px;
		width: auto;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10px;
			width: 55%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10px;
			width: 40%;
		}
/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 0px;
		padding-right: 0px;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 20px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}



}

/* iPhone 6 (landscape) */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {

	#overlay {
		width: 642px;
		height: -moz-calc(100% - 75px);
		height: -webkit-calc(100% - 75px);
		height: calc(100% - 75px);
	}
		#overlay div picture img {
			max-width: 642px;
		}

	.header {
		background: #000;
		height:55px !important;
	}
		.header .logo {
			padding: 10px 65px 10px 10px;
			height: auto;
		}
			.header .logo img {
				width: auto;
				height: 30px;
			}

		.header .orderTotal p,
		.header .orderDesktop p,
		.header .orderWeb p,
		.header .orderApp p {
			padding: 10px 0 5px 40px;
			font-size: 16px;
			line-height: 32px;
			width:30px;
			text-align:right;
		}

		.header #orderIcon {
			padding: 10px 10px 5px 10px;
			width:20px;
			height: 30px;
		}

		.header #orderIcon div:after {
		  font-family: 'jttypefont';
		  content: "^";
		  font-size: 18px;
		  line-height: 0px;
		  vertical-align: top;
		  color: #fff;
		  background: transparent !important;
		  display:none;
		}
	
	ul.sub-nav {display:none;}
	
	.footer ul.sub-nav {display: block;}

	/* start mobile navigation */

	#mobile-nav {
		margin: 0;
		padding:0;
		display:none;
	}
		#mobile-nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
		}
		  #mobile-nav ul li {
			  margin: 0;
			  padding: 0;float:none;
		  }
			#mobile-nav ul li a {
				margin: 0;
				padding: 10px 15px 10px 12px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}
		#mobile-nav ul li.parent-here:before, #mobile-nav ul li.here:before {
			font-family: 'jttypefont';
			content: "R";
			font-size: 18px;
			line-height: 28px;
			font-weight: 300;
			vertical-align: top;
			color: #000;
			background: transparent;
			padding-right: 5px;
		}
			#mobile-nav ul li.parent-here a, #mobile-nav ul li.here a {
				margin: 0;
				padding: 10px 15px 10px 8px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}

	/*** OLD ***/
	#toggle-menu {
		position: absolute;
		top: 23px;
		right: 10px;
		display: block;
	}

		#toggle-menu::after {
			  font-family: 'jttypefont';
			  content: "M";
			  font-size: 25px;
			  line-height: 0px;
			  vertical-align: top;
			  color: #fff;
			  background: transparent !important;
		}

	#menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;		
		z-index: 10; /* Make sure the z-index is lower than the #page */
	}

	#menu a {
		display: inline-block;
	}

	/* Animations */

	#page, #menu {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.menu-visible #menu {
		display: block;
	}

	.menu-visible.animating #menu {
		display: none;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .5s ease-in-out;
		-webkit-transition: -webkit-transform .5s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -200px, 0, 0 );
		-webkit-transform: translate3d( -200px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 200px, 0, 0 );
		-webkit-transform: translate3d( 200px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 200px;
	}

	/*** override black border at top ***/
	ul.accordion2 {
	  
	}


	/* end mobile navigation */

	
	/*#background {display:none;}*/
	
	body {
		height:100% !important; 
		background-color: #eeeae7;
		overflow:auto;
	}
	#page {
	}
	
	.footer, #banner-panel, #fontlist-panel, #gallery-panel, #info-panel, #buy-panel, #related-panel, #title-panel, #order-panel, #publicationslist-panel, #general-panel, #general-panel2, #general-panel3, #main-accordion, #secondary-accordion, #contact, .rowContainer, .panel {
		width: 642px;
	}

#gallery-panel {
	margin-top: 10px;
}

		.footer ul.sub-nav li,
		.footer ul.sub-nav li.right {
			float: left;
			text-align: left;
			width: 100%;
		}		
			.footer ul.sub-nav li a p {
				padding: 15px 15px 0 0;
			}
			.footer ul.sub-nav li.right p {
				padding: 30px 0 20px 0;
			}

		.panel-padded, .panel-padded-alert {
			width: 622px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				display:none;
			}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	#info-panel {
		margin-top: 10px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 10px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 10px;
	}

	#title-panel {
		margin-top: 10px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 10px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}
	
	
	
	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:39px;vertical-align:middle;}
		.opt-ins span.same-line {line-height:42px;vertical-align:middle;}
	span.same-line.reducedLineHeight {/*** not needed at this resolution ***/}
	span.wrap-line {display:inline-block;line-height:39px;vertical-align:middle;}
		.opt-ins span.wrap-line {display:inline-block;line-height:42px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button {margin-left:0px;margin-top: 0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button {margin-left:0px; margin-top: 0px; margin-bottom: 0px;}

	span.wrap-line button.pure-button { margin-top: 0px; }

	
	
	.tab-content {
		padding-bottom: 10px;
	}
		.tab-content p {
			max-width: 440px;
		}
	

	ul.gridder {
		margin-left: -10px;
	}

	/* total 2 tiles wide */
	ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
		width: 153px;
		height: 170px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		margin: 10px 0 0 10px;
		width: 316px;
		height: 170px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 316px;
			height: 170px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 316px;
			height: 170px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 316px;
			height: 170px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 170px;
			}

		div.static { height: 170px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -68%);
			height: 50%;
		}	

		
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 642px;
			height: 305px;
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 305px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 60px;
		line-height: 80px;
	}
		ul#related li div.title p {
			font-size: 60px;
			line-height: 80px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 60px;
				line-height: 70px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 60px;
					line-height: 70px;
				}


	/*picture {padding: 0 10px;}*/
				
	picture img {
		width: 622px;
	}
	
	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 642px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 642px !important;
		height: 280px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: 0 !important;
			padding: 0;
			width: 642px !important;
			height: 240px !important; 
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 642px !important;
				height: 222px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: 0 !important;
					padding: 0;
					width: 642px !important;
					height: 222px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	#slider-prev, #slider-next {
		display: none !important;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; display:none !important;} /* half of padding .rsSlide img inside rs-default.css */
	
	
	#title-panel div h1 {
		font-size: 30px !important;
		line-height: 32px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 316px;
		height: 170px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		padding-right: 20px;
		width: 280px;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: 0 !important;
		width: 280px;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10px;
			padding-right: 10px;
			width: 260px;
			float: left;
		}
		.columns .rightColumn {
			margin-top: 0 !important;
			padding-left: 10px;
			padding-right: 10px;
			width: 260px;
			float: left;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder {
		padding-bottom: 10px;
	}

	.downloads ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 153px;
		height: 160px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 153px;
			/*height: 160px;*/
			height: auto;
			overflow: hidden;
		}
	
/*** licensing content layout ***/
	ul.accordion2 li.active a p {
		margin-left: 10px;
		padding-left: 0;
		padding-right: 10px;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}

	.tab-content ol, .tab-content p {
		padding: 0 18%;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10px;
		width: auto;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10px;
			width: 55%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10px;
			width: 40%;
		}
/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 18%;
		padding-right: 18%;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 45% 20px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}



}

/* zoomed iPhone 6 (landscape) */
/* not used - see css file in directory */
/* end zoomed iPhone 6 (landscape) */

/* iPhone 6 Plus (portrait) */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {

	#overlay {
		width: 394px;
		height: -moz-calc(100% - 75px);
		height: -webkit-calc(100% - 75px);
		height: calc(100% - 75px);
	}
		#overlay div picture img {
			max-width: 394px;
		}

	.header {
		background: #000;
		height:55px !important;
	}
		.header .logo {
			padding: 12px 65px 12px 10px;
			height: auto;
		}
			.header .logo img {
				width: auto;
				height: 26px;
			}

		.header .orderTotal p,
		.header .orderDesktop p,
		.header .orderWeb p,
		.header .orderApp p {
			padding: 10px 0 5px 0px;
			font-size: 16px;
			line-height: 32px;
			width: 30px;
			text-align: right;
		}

		.header #orderIcon {
			padding: 10px 0px 5px 10px;
			width: 20px;
			height: 30px;
		}

		.header #orderIcon div:after {
		  font-family: 'jttypefont';
		  content: "^";
		  font-size: 18px;
		  line-height: 0px;
		  vertical-align: top;
		  color: #fff;
		  background: transparent !important;
		  display:none;
		}
	
	ul.sub-nav {display:none;}
	
	.footer ul.sub-nav {display: block;}

	/* start mobile navigation */

	#mobile-nav {
		margin: 0;
		padding:0;
		display:none;
	}
		#mobile-nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
		}
		  #mobile-nav ul li {
			  margin: 0;
			  padding: 0;float:none;
		  }
			#mobile-nav ul li a {
				margin: 0;
				padding: 10px 15px 10px 12px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}
		#mobile-nav ul li.parent-here:before, #mobile-nav ul li.here:before {
			font-family: 'jttypefont';
			content: "R";
			font-size: 18px;
			line-height: 28px;
			font-weight: 300;
			vertical-align: top;
			color: #000;
			background: transparent;
			padding-right: 5px;
		}
			#mobile-nav ul li.parent-here a, #mobile-nav ul li.here a {
				margin: 0;
				padding: 10px 15px 10px 8px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}

	/*** OLD ***/
	#toggle-menu {
		position: absolute;
		top: 23px;
		right: 10px;
		display: block;
	}

		#toggle-menu::after {
			  font-family: 'jttypefont';
			  content: "M";
			  font-size: 25px;
			  line-height: 0px;
			  vertical-align: top;
			  color: #fff;
			  background: transparent !important;
		}

	#menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 10; /* Make sure the z-index is lower than the #page */
	}

	#menu a {
		display: inline-block;
	}

	/* Animations */

	#page, #menu {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.menu-visible #menu {
		display: block;
	}

	.menu-visible.animating #menu {
		display: none;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .5s ease-in-out;
		-webkit-transition: -webkit-transform .5s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -200px, 0, 0 );
		-webkit-transform: translate3d( -200px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 200px, 0, 0 );
		-webkit-transform: translate3d( 200px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 200px;
	}

	/*** override black border at top ***/
	ul.accordion2 {
	  
	}


	/* end mobile navigation */

	
	/*#background {display:none;}*/
	
	body {
		height:100% !important; 
		background-color: #eeeae7;
		overflow:auto;
	}
	#page {
	}
	
	.footer, #fontlist-panel, #banner-panel, #gallery-panel, #info-panel, #buy-panel, #related-panel, #title-panel, #order-panel, #publicationslist-panel, #general-panel, #general-panel2, #general-panel3, #main-accordion, #secondary-accordion, #contact, .rowContainer, .panel {
		width: 394px;
	}

#gallery-panel {
	margin-top: 10px;
}

		.footer ul.sub-nav li,
		.footer ul.sub-nav li.right {
			float: left;
			text-align: left;
			width: 100%;
		}		
			.footer ul.sub-nav li a p {
				padding: 15px 15px 0 0;
			}
			.footer ul.sub-nav li.right p {
				padding: 30px 0 20px 0;
			}

		.panel-padded, .panel-padded-alert {
			width: 374px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				display:none;
			}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	#info-panel {
		margin-top: 10px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 10px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 10px;
	}

	#title-panel {
		margin-top: 10px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 10px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}
	

	/* span before tab buttons */
	.tabs ul.horizontal span {
		margin-right: 5px;
	}

	
	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:24px;vertical-align:middle;}
	span.same-line.reducedLineHeight {line-height:24px !important;}
	span.wrap-line {display:block;line-height:24px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button { margin-left:0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button { margin-left:0px; margin-top: 5px; margin-bottom: 5px; }
		
	span.wrap-line button.pure-button { margin-top: 5px; }

	
	.tab-content {
		padding-bottom: 10px;
	}
		.tab-content p {
			max-width: 280px;
		}
	

	ul.gridder {
		margin-left: -10px;
	}

	/* total 2 tiles wide */
	ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
		width: 192px;
		height: 170px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		margin: 10px 0 0 10px;
		width: 394px;
		height: 170px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 394px;
			height: 170px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 394px;
			height: 170px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 394px;
			height: 170px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 170px;
			}

		div.static { height: 170px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -68%);
			height: 50%;
		}	

		
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 394px;
			height: 244px;
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 244px; }

			/*ul.gridder li.gridder-list.banner-six div div {
				margin: -3px 0 0 0;
				font-size: 0;
			}*/

	div.two div.static p,
	div.one div.tcycle p {
		font-size: 60px;
		line-height: 80px;
	}
		ul#related li div.title p {
			font-size: 60px;
			line-height: 80px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 60px;
				line-height: 70px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 60px;
					line-height: 70px;
				}


	/*picture {padding: 0 10px;}*/
				
	picture img {
		width: 374px;
	}
	
	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 394px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 394px !important;
		height: 243px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: -70px !important;
			padding: 0;
			width: 534px !important;
			height: 200px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 394px !important;
				height: 185px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: -74px !important;
					padding: 0;
					width: 542px !important;
					height: 185px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}
	
	#slider-prev, #slider-next {
		display: none !important;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; display:none !important;} /* half of padding .rsSlide img inside rs-default.css */

	
	#title-panel div h1 {
		font-size: 40px !important;
		line-height: 44px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 394px;
		height: 170px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		width: 374px;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: -12px !important;
		width: 374px;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10px;
			padding-right: 10px;
			width: 374px;
			float: left;
		}
		.columns .rightColumn {
			margin-top: -12px !important;
			padding-left: 10px;
			padding-right: 10px;
			width: 374px;
			float: left;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder {
		padding-bottom: 10px;
	}

	.downloads ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 192px;
		height: 170px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 192px;
			/*height: 170px;*/
			height: auto;
			overflow: hidden;
		}
	
/*** licensing content layout ***/
	ul.accordion2 li.active a p {
		margin-left: 10px;
		padding-left: 0;
		padding-right: 10px;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}

	.tab-content ol, .tab-content p {
		padding: 0 10px;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10px;
		width: auto;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10px;
			width: 55%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10px;
			width: 40%;
		}
/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 0px;
		padding-right: 0px;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 90%;
		padding: 20px 0 20px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}


	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}



}

/* iPhone 6 Plus (landscape) */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {

	#overlay {
		width: 714px;
		height: -moz-calc(100% - 75px);
		height: -webkit-calc(100% - 75px);
		height: calc(100% - 75px);
	}
		#overlay div picture img {
			max-width: 714px;
		}

	.header {
		background: #000;
		height:55px !important;
	}
		.header .logo {
			padding: 10px 65px 10px 10px;
			height: auto;
		}
			.header .logo img {
				width: auto;
				height: 30px;
			}

		.header .orderTotal p,
		.header .orderDesktop p,
		.header .orderWeb p,
		.header .orderApp p {
			padding: 10px 0 5px 70px;
			font-size: 16px;
			line-height: 32px;
			width:30px;
			text-align:right;
		}

		
		.header #orderIcon {
			padding: 10px 10px 5px 10px;
			width:20px;
			height: 30px;
		}

		.header #orderIcon div:after {
		  font-family: 'jttypefont';
		  content: "";
		  font-size: 18px;
		  line-height: 0px;
		  vertical-align: top;
		  color: #fff;
		  background: transparent !important;
		  display:none;
		}
		
	
	ul.sub-nav {display:none;}
	
	.footer ul.sub-nav {display: block;}

	/* start mobile navigation */

	#mobile-nav {
		margin: 0;
		padding:0;
		display:none;
	}
		#mobile-nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
		}
		  #mobile-nav ul li {
			  margin: 0;
			  padding: 0;float:none;
		  }
			#mobile-nav ul li a {
				margin: 0;
				padding: 10px 15px 10px 12px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}
		#mobile-nav ul li.parent-here:before, #mobile-nav ul li.here:before {
			font-family: 'jttypefont';
			content: "R";
			font-size: 18px;
			line-height: 28px;
			font-weight: 300;
			vertical-align: top;
			color: #000;
			background: transparent;
			padding-right: 5px;
		}
			#mobile-nav ul li.parent-here a, #mobile-nav ul li.here a {
				margin: 0;
				padding: 10px 15px 10px 8px;
				background: #000;
				color: #fff;
				font-size: 15px;
				line-height: 35px;
			}

	/*** OLD ***/
	#toggle-menu {
		position: absolute;
		top: 23px;
		right: 10px;
		display: block;
	}

		#toggle-menu::after {
			  font-family: 'jttypefont';
			  content: "M";
			  font-size: 25px;
			  line-height: 0px;
			  vertical-align: top;
			  color: #fff;
			  background: transparent !important;
		}

	#menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;		
		z-index: 10; /* Make sure the z-index is lower than the #page */
	}

	#menu a {
		display: inline-block;
	}

	/* Animations */

	#page, #menu {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.menu-visible #menu {
		display: block;
	}

	.menu-visible.animating #menu {
		display: none;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .5s ease-in-out;
		-webkit-transition: -webkit-transform .5s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -200px, 0, 0 );
		-webkit-transform: translate3d( -200px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 200px, 0, 0 );
		-webkit-transform: translate3d( 200px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 200px;
	}

	/*** override black border at top ***/
	ul.accordion2 {
	  
	}


	/* end mobile navigation */

	
	/*#background {display:none;}*/
	
	body {
		height:100% !important; 
		background-color: #eeeae7;
		overflow:auto;
	}
	#page {
	}
	
	.footer, #banner-panel, #fontlist-panel, #gallery-panel, #info-panel, #buy-panel, #related-panel, #title-panel, #order-panel, #publicationslist-panel, #general-panel, #general-panel2, #general-panel3, #main-accordion, #secondary-accordion, #contact, .rowContainer, .panel {
		width: 714px;
	}

#gallery-panel {
	margin-top: 10px;
}

		.footer ul.sub-nav li,
		.footer ul.sub-nav li.right {
			float: left;
			text-align: left;
			width: 100%;
		}		
			.footer ul.sub-nav li a p {
				padding: 15px 15px 0 0;
			}
			.footer ul.sub-nav li.right p {
				padding: 30px 0 20px 0;
			}

		.panel-padded, .panel-padded-alert {
			width: 694px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

			.panel .close-btn span,
			.panel-padded .close-btn span,
			.panel .nested-close-btn span,
			.panel-padded .nested-close-btn span {
				display:none;
			}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	#info-panel {
		margin-top: 10px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 10px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 10px;
	}

	#title-panel {
		margin-top: 10px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 10px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}
	
	

	
	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:39px;vertical-align:middle;}
		.opt-ins span.same-line {line-height:42px;vertical-align:middle;}
	span.same-line.reducedLineHeight {/*** not needed at this resolution ***/}
	span.wrap-line {display:inline-block;line-height:39px;vertical-align:middle;}
		.opt-ins span.wrap-line {display:inline-block;line-height:42px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button {margin-left:0px;margin-top: 0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button {margin-left:0px; margin-top: 0px; margin-bottom: 0px;}

	span.wrap-line button.pure-button { margin-top: 0px; }

	
	.tab-content {
		padding-bottom: 10px;
	}
		.tab-content p {
			max-width: 440px;
		}
	

	ul.gridder {
		margin-left: -10px;
	}

	/* total 2 tiles wide */
	ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
		width: 171px;
		height: 170px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		margin: 10px 0 0 10px;
		width: 352px;
		height: 170px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 352px;
			height: 170px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 352px;
			height: 170px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 352px;
			height: 170px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 170px;
			}

		div.static { height: 170px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -68%);
			height: 50%;
		}	

		
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 714px;
			height: 332px;
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 332px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 60px;
		line-height: 80px;
	}
		ul#related li div.title p {
			font-size: 60px;
			line-height: 80px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 60px;
				line-height: 70px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 60px;
					line-height: 70px;
				}



	/*picture {padding: 0 10px;}*/
				
	picture img {
		width: 694px;
	}
	
	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 714px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 714px !important;
		height: 304px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: 0 !important;
			padding: 0;
			width: 714px !important;
			height: 267px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 714px !important;
				height: 246px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: 0 !important;
					padding: 0;
					width: 714px !important;
					height: 246px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	#slider-prev, #slider-next {
		display: none !important;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; display:none !important;} /* half of padding .rsSlide img inside rs-default.css */
	
	
	#title-panel div h1 {
		font-size: 40px !important;
		line-height: 44px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 352px;
		height: 170px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		padding-right: 20px;
		width: 320px;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: 0 !important;
		width: 320px;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10px;
			padding-right: 10px;
			width: 300px;
			float: left;
		}
		.columns .rightColumn {
			margin-top: 0 !important;
			padding-left: 10px;
			padding-right: 10px;
			width: 300px;
			float: left;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder {
		padding-bottom: 10px;
	}

	.downloads ul.gridder li.gridder-list {
		margin: 10px 0 0 10px;
	}

	.downloads ul.gridder li.gridder-list {
		width: 171px;
		height: 170px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 171px;
			/*height: 170px;*/
			height: auto;
			overflow: hidden;
		}
	
/*** licensing content layout ***/
	ul.accordion2 li.active a p {
		margin-left: 10px;
		padding-left: 0;
		padding-right: 10px;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 10px;
	  padding: 0 10px 0 0;
	}

	.tab-content ol, .tab-content p {
		padding: 0 18%;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10px;
		width: auto;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10px;
			width: 55%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10px;
			width: 40%;
		}
/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 18%;
		padding-right: 18%;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 45% 20px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}



}

/* iPads (portrait) */
@media only screen and (min-width: 768px) and (max-width: 979px) {

	
	#overlay {
		width: 720px;
		height: -moz-calc(100% - 150px);
		height: -webkit-calc(100% - 150px);
		height: calc(100% - 150px);
	}
		#overlay div picture img {
			max-width: 720px;
		}

	#toggle-menu, #mobile-nav, #menu {display:none !important;}

	.header, 
	.footer,
	#banner-panel,
	#fontlist-panel,
	#gallery-panel, 
	#info-panel, #buy-panel,
	#related-panel,  
	#title-panel, 
	#order-panel, 
	#publicationslist-panel, 
	#general-panel, #general-panel2, #general-panel3,  
	#main-accordion, 
	#secondary-accordion,
	#contact, 
	.rowContainer, 
	.panel {
		width: 720px;
	}
	.header {
		/*padding-bottom:20px !important;*/
	}

		.header .logo {
			margin: 0;
			padding: 17px 53px 17px 15px;
			background: #000;
			height: auto;
			float: left;
		}
			.header .logo img {
				width: auto;
				height: 34px;
			}

		.footer ul.sub-nav li a p {
			padding: 15px 15px 30px 0;
		}
		.footer ul.sub-nav li.right p {
			padding: 15px 0 30px 0;
		}

		.panel-padded, .panel-padded-alert {
			width: 700px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 20px;
	}
	#info-panel {
		margin-top: 20px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 20px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 20px;
	}
	#title-panel {
		margin-top: 20px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 20px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}


	/*** updated form spacing - 21.11.16 ***/

	/*** added two-columns below - 05.04.17 ***/	
	.panel div.two-columns .additional-item.limited { /*** added to force iPad resolution licence text for web onto new line ***/
		max-width: 650px;
	}
	
	span.same-line {line-height:39px;vertical-align:middle;}
		.opt-ins span.same-line {line-height:42px;vertical-align:middle;}
	span.same-line.reducedLineHeight {/*** not needed at this resolution ***/}
	span.wrap-line {display:inline-block;line-height:39px;vertical-align:middle;}
		.opt-ins span.wrap-line {display:inline-block;line-height:42px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button {margin-left:0px;margin-top: 0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button {margin-left:0px; margin-top: 0px; margin-bottom: 0px;}

	span.wrap-line button.pure-button { margin-top: 0px; }

	
	.tab-content {
		padding-bottom: 20px;
	}
	
	
	/* total 4 tiles wide */
	ul.gridder li.gridder-list {
		width: 165px;
		height: 170px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		width: 350px;
		height: 170px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 535px;
			height: 170px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 720px;
			height: 170px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 720px;
			height: 170px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 170px;
			}

		div.static { height: 170px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -68%);
			height: 50%;
		}	

		
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 720px;
			height: 336px; /* height of 300 plus caption @ 36px */
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
			/*border-bottom:1px solid #fc0;*/
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 336px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 60px;
		line-height: 80px;
	}
		ul#related li div.title p {
			font-size: 60px;
			line-height: 80px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 60px;
				line-height: 96px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 60px;
					line-height: 96px;
				}


	picture {padding: 0 10px;}
				
	picture img {
		width: 680px;
	}

	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 720px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 720px !important;
		height: 306px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: 0 !important;
			padding: 0;
			width: 720px !important;
			height: 269px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 720px !important;
				height: 248px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: 0 !important;
					padding: 0;
					width: 720px !important;
					height: 248px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; } /* half of padding .rsSlide img inside rs-default.css */


	#title-panel div h1 {
		font-size: 48px !important;
		line-height: 50px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 350px;
		height: 170px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin-top: 0;
		padding-right: 40px;
		width: 45%;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: 0 !important;
		padding-right: 0;
		width: 45%;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 10%;
			width: 35%;
			float: left;
		}
		.columns .rightColumn {
			margin-top: 0 !important;
			padding-right: 10%;
			width: 35%;
			float: right;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder li.gridder-list {
		width: 165px;
		height: 170px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 165px;
			/*height: 170px;*/
			height: auto;
			overflow: hidden;
		}
	
/*** licensing content layout ***/
	ul.accordion2 li a p,
	ul.accordion2 li.active a p {
		margin-left: 0px;
		padding-left: 10%;
		padding-right: 10%;
	}
	ul.accordion2 li div.inner p {
	  margin-left: 0px;
	  padding: 0 10%;
	}
	ul.accordion2 li div.inner.show p {
	  margin-left: 0px;
	  padding: 0 10%;
	  color: #000;
	}

	.tab-content ol, .tab-content p {
		padding: 0 10%;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 10%;
		width: 80%;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-left: 10%;
			width: 50%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 0;
			padding-right: 10%;
			width: 30%;
		}

/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 20%;
		padding-right: 20%;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 45%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

}

/* Large Desktops */
@media only screen and (min-width : 1360px) {

	
	#overlay {
		width: 1300px;
		height: -moz-calc(100% - 150px) !important;
		height: -webkit-calc(100% - 150px) !important;
		height: calc(100% - 150px) !important;
	}
		#overlay div picture img {
			width: 1300px;
		}

	#toggle-menu, #mobile-nav, #menu {display:none;}

	.header, 
	.footer, 
	#banner-panel,
	#fontlist-panel,
	#gallery-panel, 
	#info-panel, #buy-panel,
	#related-panel, 
	#title-panel, 
	#order-panel,
	#publicationslist-panel, 
	#general-panel, #general-panel2, #general-panel3,   
	#main-accordion, 
	#secondary-accordion,
	#contact, 
	.rowContainer, 
	.panel {
		width: 1300px;
	}
		#fontlist-panel,
		#gallery-panel {
			width: auto;
			padding: 0 20px;
		}

	.header {
		/*padding-bottom:20px !important;*/
	}

		.header .logo {
			margin: 0;
			padding: 17px 270px 17px 25px;
			background: #000;
			height: auto;
			float: left;
		}
			.header .logo img {
				width: auto;
				height: 44px;
			}

		.footer ul.sub-nav li a p {
			padding: 15px 15px 30px 0;
		}
		.footer ul.sub-nav li.right p {
			padding: 15px 0 30px 0;
		}

		.panel-padded, .panel-padded-alert {
			width: 1280px;
			padding: 10px 10px 10px 10px;
		}
		#generate {
			padding: 10px 0px 10px 0px;
		}

	#banner-panel {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#fontlist-panel {
		padding-top: 0px;
		padding-bottom: 20px;
	}
	#info-panel {
		margin-top: 20px;
		padding-bottom: 0px;
	}
	#buy-panel {
		margin-top: 0px;
		padding-bottom: 20px;
	}
	#related-panel {
		margin-top: 0;
		padding-bottom: 20px;
	}

	#title-panel {
		margin-top: 20px;
	}
	#general-panel, #general-panel2, #general-panel3 {
		margin-top: 0px;
	}
	#order-panel {
		padding-bottom: 20px;
	}



	.font-panel div {
		margin: 0;
		padding: 0 20px;
		font-size: 64px;
		line-height: 0;
	}

	/*** updated form spacing - 21.11.16 ***/
	span.same-line {line-height:39px;vertical-align:middle;}
		.opt-ins span.same-line {line-height:42px;vertical-align:middle;}
	span.same-line.reducedLineHeight {/*** not needed at this resolution ***/}
	span.wrap-line {display:inline-block;line-height:39px;vertical-align:middle;}
		.opt-ins span.wrap-line {display:inline-block;line-height:42px;vertical-align:middle;}

	span.same-line select, span.same-line input[type="text"], span.same-line button, span.same-line a.pure-button, span.same-line a.disabled-button {margin-left:0px;margin-top: 0px;}
	span.wrap-line select, span.wrap-line input[type="text"], span.wrap-line button, span.wrap-line a.pure-button, span.wrap-line a.disabled-button {margin-left:0px; margin-top: 0px; margin-bottom: 0px;}

	span.wrap-line button.pure-button { margin-top: 0px; }

	
	.tab-content {
		padding-bottom: 20px;
	}
	
	
	/* total 6 tiles wide */
	ul.gridder li.gridder-list {
		width: 200px;
		height: 180px;
	}
	/* 2 tiles wide */
	ul.gridder li.gridder-list.family {
		width: 420px;
		height: 180px;
	}
		/* 3 tiles wide */
		ul.gridder li.gridder-list.family-three {
			width: 640px;
			height: 180px;
		}
		/* 4 tiles wide */
		ul.gridder li.gridder-list.family-four {
			width: 860px;
			height: 180px;
		}
		/* 5 tiles wide */
		ul.gridder li.gridder-list.family-five {
			width: 1080px;
			height: 180px;
		}
		
			ul.gridder li div.one, ul.gridder li div.two .short, ul.gridder li div.two .long {
				height: 180px;
			}

		div.static { height: 180px; }

		/* steffano images */
		div.tile img {
			position: absolute;
			/*top: 45%;*/
			left: 50%;
			transform: translate(-50%, -55%);
			height: 55%;
		}	

		
		/* 6 tiles wide - used for homepage banners */
		ul.gridder li.gridder-list.banner-six {
			width: 1300px;
			height: 366px; /* height of 330 plus caption @ 36px */
			text-align: left;
			border-bottom: none;
			background: none;
			font-size:0;
			display: block;
		}
			ul.gridder li.gridder-list.banner-six div.static { height: 366px; }


	div.two div.static p,
	div.one div.tcycle p {
		font-size: 66px;
		line-height: 100px;
	}
		ul#related li div.title p {
			font-size: 66px;
			line-height: 100px;
		}


			#fontlist-panel div.two div.static p {
				font-size: 66px;
				line-height: 116px;
			}
				#fontlist-panel ul#related li div.title p {
					font-size: 66px;
					line-height: 116px;
				}


	picture {padding: 0 10px;}
				
	picture img {
		width: 1260px;
	}

	.banner-six picture {padding: 0;}
				
	.banner-six picture img {
		width: 1300px;
		vertical-align: bottom;
	}

	/* for font examples */
	.royalSlider {
		width: 1300px !important;
		height: 506px !important; /* Brian 4.1.2018 */
	}
		.royalSlider img {
			margin-left: 0 !important;
			padding: 0;
			width: 1300px !important;
			height: 485px !important;
		}

			/* for publications */
			#general-panel .royalSlider, #general-panel .rsOverflow {
				width: 1300px !important;
				height: 448px !important; /* Brian 4.1.2018 */
			}
				#general-panel .royalSlider img {
					margin-left: 0 !important;
					padding: 0;
					width: 1300px !important;
					height: 448px !important; /* Brian 4.1.2018 */
				}

	.rsSlide div p {
		left: 10px;
		top: 4px;
		position: absolute;
		z-index: 9999;
		color: #000;
	}	
	
	.rsDefault.rsHor .rsArrowLeft, 
	.rsDefault.rsHor .rsArrowRight { top: 20px !important; } /* half of padding .rsSlide img inside rs-default.css */


	#title-panel div h1 {
		font-size: 48px !important;
		line-height: 50px !important;
	}


	#publicationslist-panel ul.gridder li.gridder-list img {
		width: 420px;
		height: 180px;
	}


	/*** 2 columns text under image slider on font & publication pages ***/
	#info-panel .padded .leftColumn,
	#general-panel .padded.publications .leftColumn,
	#general-panel2 .padded.publications .leftColumn,
	#general-panel3 .padded.publications .leftColumn {
		margin: 0;
		padding-right: 60px;
		width: 40%;
		float: left;
	}
	#info-panel .padded .rightColumn,
	#general-panel .padded.publications .rightColumn,
	#general-panel2 .padded.publications .rightColumn,
	#general-panel3 .padded.publications .rightColumn {
		margin-top: 0 !important;
		padding-right: 60px;
		width: 40%;
		float: left;
	}

	/*** 2 columns text sitemap ***/
	.columns {
		background-color: #d5e9e9;
		width: 100%;
	}
		.columns .leftColumn {
			margin-top: 0;
			padding-left: 20%;
			width: 25%;
			float: left;
		}
		.columns .rightColumn {
			margin-top: 0 !important;
			padding-right: 20%;
			width: 25%;
			float: right;
		}


	.downloads {
		margin: 0;
		padding: 0;
		width: 100%;
		background: #d5e9e9;	
	}
	.downloads p {
		margin: 0;
		padding: 19px 10px;
		background: #bfdadb;
	}
	
	.downloads ul.gridder li.gridder-list {
		width: 200px;
		height: 180px;
	}
		.downloads ul.gridder li.gridder-list img {
			width: 200px;
			/*height: 180px;*/
			height: auto;
			overflow: hidden;
		}


/*** licensing content layout ***/
	ul.accordion2 li a p,
	ul.accordion2 li.active a p {
		/*margin-left: 5px;*/
		padding-left: 25%;
		padding-right: 25%;
	}
	ul.accordion2 li div.inner p {
	  /*margin-left: 5px;*/
	  padding: 0 25%;
	}
	ul.accordion2 li div.inner.show p {
	  /*margin-left: 5px;*/
	  padding: 0 25%;
	}

	.tab-content ol, .tab-content p {
		padding: 0 25%;
	}

	ul.accordion2 li div.inner table,
	ul.accordion2 li div.inner.show table {
		/*margin: 18px 20%;
		width: 60%;*/
		margin: 18px 0;
		width: 100%;
	}
		ul.accordion2 li div.inner th.left,
		ul.accordion2 li div.inner.show th.left,
		ul.accordion2 li div.inner td.left,
		ul.accordion2 li div.inner.show td.left {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 18px 0;
			padding-left: 25%;
			width: 25%;
		}
		ul.accordion2 li div.inner th.right,
		ul.accordion2 li div.inner.show th.right,
		ul.accordion2 li div.inner td.right,
		ul.accordion2 li div.inner.show td.right {
			/*margin: 18px 20%;
			width: 60%;*/
			margin: 18px 0;
			padding-right: 25%;
			width: 25%;
		}

/*** about content layout ***/
	#general-panel .about-text,
	#general-panel2 .about-text,
	#general-panel3 .about-text {
		/*margin-left: 5px;*/
		padding-left: 25%;
		padding-right: 24%;
	}

	#general-panel .padded .leftColumn,
	#general-panel2 .padded .leftColumn,
	#general-panel3 .padded .leftColumn {
		/*margin-left: 5px;*/
		width: 30%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .middleColumn,
	#general-panel2 .padded .middleColumn,
	#general-panel3 .padded .middleColumn {
		/*margin-left: 5px;*/
		width: 30%;
		padding: 20px 20px 0px 0;
		float: left;
	}
	#general-panel .padded .rightColumn,
	#general-panel2 .padded .rightColumn,
	#general-panel3 .padded .rightColumn {
		/*margin-left: 5px;*/
		width: 30%;
		padding: 20px 20px 20px 0;
		float: left;
	}

		#general-panel div.padded.sitemap {
			margin: 0;
			padding: 0 15% 10px 20%;
		}
			#general-panel .padded.sitemap .leftColumn {
				/*margin-left: 5px;*/
				width: 37%;
				padding: 20px 0 0 0;
				float: left;
			}
			#general-panel .padded.sitemap .middleColumn {
				/*margin-left: 5px;*/
				width: 33%;
				padding: 20px 0 0 0;
				float: left;
			}
			#general-panel .padded.sitemap .rightColumn {
				/*margin-left: 5px;*/
				width: 30%;
				padding: 20px 0 0 0;
				float: left;
			}
	
	#general-panel .padded ul,
	#general-panel2 .padded ul,
	#general-panel3 .padded ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	.lessThan4 {
		margin-left: 250px !important;
	}

}




/*** new menu responsive ***/

@media only screen and (min-width: 768px) {

	/* mobile */
	#toggle-menu, #mobile-nav, #menu {display:none !important;}
	
	/* desktop */
	.header ul.sub-nav {display: block !important;}
	
}

@media only screen and (max-width: 767px) {

	/* mobile */
	#toggle-menu {display:block !important;}
	
	/* desktop */
	.header ul.sub-nav {display: none !important;}
	
}


/**** responsive ****/



/*.footer ul.sub-nav li.right p {
	cursor: default;
}*/


	/*.footer .sub-nav li {background:white !important;}*/

/*** progress bar modal window ***/

.ui-widget-overlay
{
  background-color: rgba(0, 0, 0, 0.4) !important; /* This will make it darker */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88888;
}

.ui-dialog {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    margin-left: -250px !important; 
    margin-top: -43px !important; 
    padding: 0 !important;
    width: 500px !important;
    z-index: 9999999999;
    background: #fff !important;
} 


#progressModal { height: 86px !important; }

#progressModal .ui-dialog-titlebar, .ui-icon, .ui-resizable-handle { display:none !important; }

#progressModal .ui-widget.ui-widget-content {
    border: none;
}
#progressModal .ui-widget-content {
    border: none;
    background: #fff;/*background: #d5e9e9;*/ /* background progressbar */
    color: #000;
}
#progressModal .ui-widget {
    font-family: inherit;
    font-size: 15px !important;
}
#progressModal .ui-progressbar {
    height: 30px;
    text-align: left;
    overflow: hidden;
}

#progressModal .ui-progressbar .ui-progressbar-value {
    margin: 0;
    height: 100%;
}
#progressModal .ui-corner-all, #progressModal .ui-corner-bottom, .ui-corner-left, #progressModal .ui-corner-bl {
    border-bottom-left-radius: 0;
}
#progressModal .ui-corner-all, #progressModal .ui-corner-top, #progressModal .ui-corner-left, #progressModal .ui-corner-tl {
    border-top-left-radius: 0;
}
#progressModal .ui-widget-header {
    border: none;
    background: #8fbabc;/*background: #bfdadb;*/ /* foreground progressbar */
    color: #000;
}			

#progressModal .highlightAlert { margin: 0; padding: 0; position: relative; width: 100%; height: 56px; }

#progressModal .highlightAlert p {
    margin-top: 0;
    margin-left: 40px;
    padding: 18px 5px 18px 10px;
    float: none;
}
#progressModal .highlightAlert p:first-of-type::before {
	top: 10px !important;
	left: -30px !important;
}
#progressModal .highlightAlert p:first-of-type::after {
	top: 14px !important;
	left: -25px !important;
}

#progress { }

@media only screen and (max-width: 767px) {

	.ui-dialog {
		margin-left: -150px !important;
		width: 300px !important;
	}
		
}
	





/* iPhone X Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 



	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }


	#gallery-panel {
		margin-top: 10px;
	}

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPhone 11 Pro, X and Xs Landscape */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

	
	@supports(padding: max(0px)) {
		#page {
			padding-left: max(10px, env(safe-area-inset-left));
			padding-right: max(10px, env(safe-area-inset-right));
		}
	}
	
	.header {
		background: transparent !important;
		/*background: #f00 !important;*/
	}
	.header #orderIcon div::after { margin-left: 7px; margin-top: -3px; color: #000; }
	
	#banner-panel {
		padding-top: 50px !important;
	}
	
	ul.gridder {
		margin: 0;
			margin-left: 0px;
		margin-left: -20px;
		padding: 0;
	}

	ul.gridder li.gridder-list.banner-six { margin-top: 40px !important; }
	
	ul.gridder li.gridder-list {
		margin: 20px 0 0 20px !important;
		width: 165px;
		/*border-bottom: 1px solid purple;*/
	}

		ul.gridder li.gridder-list.family,

		ul.gridder li.gridder-list.family,
		ul.gridder li.gridder-list.family-three,
		ul.gridder li.gridder-list.family-four,
		ul.gridder li.gridder-list.family-five { width: 350px !important; }
	
	#fontlist-panel div.two div.static p {
		font-size: 55px;
		line-height: 55px;
	}
	
	#info-panel, #title-panel, #about-panel {
		margin-top: 90px !important;
	}
	#publicationslist-panel {
		margin-top: 70px !important;
	}

	.footer ul.sub-nav li { width: auto; }
	.footer ul.sub-nav li.right { width: auto; float: right; }
	
	.cc_container .cc_btn { margin-right: 20px; }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPhone 11, Xr Landscape */
@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

	
	@supports(padding: max(0px)) {
		#page {
			padding-left: max(10px, env(safe-area-inset-left));
			padding-right: max(10px, env(safe-area-inset-right));
		}
	}
	
	.header {
		background: transparent !important;
	}
	.header #orderIcon div::after { margin-left: 7px; margin-top: -3px; color: #000; }
	
	#banner-panel {
		padding-top: 50px !important;
	}
	
	ul.gridder {
		margin: 0;
			margin-left: 0px;
		margin-left: -20px;
		padding: 0;
	}

	ul.gridder li.gridder-list.banner-six { margin-top: 40px !important; }
	
	ul.gridder li.gridder-list {
		margin: 20px 0 0 20px !important;
		width: 165px;
		/*border-bottom: 1px solid purple;*/
	}

		ul.gridder li.gridder-list.family,

		ul.gridder li.gridder-list.family,
		ul.gridder li.gridder-list.family-three,
		ul.gridder li.gridder-list.family-four,
		ul.gridder li.gridder-list.family-five { width: 350px !important; }
	
	#fontlist-panel div.two div.static p {
		font-size: 55px;
		line-height: 85px;
	}
	
	#info-panel, #title-panel, #about-panel {
		margin-top: 90px !important;
	}
	#publicationslist-panel {
		margin-top: 70px !important;
	}

	.footer ul.sub-nav li { width: auto; }
	.footer ul.sub-nav li.right { width: auto; float: right; }
	
	.cc_container .cc_btn { margin-right: 20px; }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPhone 11 Pro Max, Xs Max Landscape */
@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

	
	@supports(padding: max(0px)) {
		#page {
			padding-left: max(10px, env(safe-area-inset-left));
			padding-right: max(10px, env(safe-area-inset-right));
		}
	}
	
	.header {
		background: transparent !important;
	}
	.header #orderIcon div::after { margin-left: 7px; margin-top: -3px; color: #000; }
	
	#banner-panel {
		padding-top: 50px !important;
	}
	
	ul.gridder {
		margin: 0;
			margin-left: 0px;
		margin-left: -20px;
		padding: 0;
	}

	ul.gridder li.gridder-list.banner-six { margin-top: 40px !important; }
	
	ul.gridder li.gridder-list {
		margin: 20px 0 0 20px !important;
		width: 165px;
		/*border-bottom: 1px solid purple;*/
	}

		ul.gridder li.gridder-list.family,

		ul.gridder li.gridder-list.family,
		ul.gridder li.gridder-list.family-three,
		ul.gridder li.gridder-list.family-four,
		ul.gridder li.gridder-list.family-five { width: 350px !important; }
	
	#fontlist-panel div.two div.static p {
		font-size: 55px;
		line-height: 55px;
	}
	
	#info-panel, #title-panel, #about-panel {
		margin-top: 90px !important;
	}
	#publicationslist-panel {
		margin-top: 70px !important;
	}

	.footer ul.sub-nav li { width: auto; }
	.footer ul.sub-nav li.right { width: auto; float: right; }
	
	.cc_container .cc_btn { margin-right: 20px; }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}


/* iPad 9.7" Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {


	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPad 9.7" Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {


	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPad Pro 10.5" Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {


	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPad Pro 10.5" Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {


	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}

/* iPad Pro 12.9" Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {


	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}

	
}

/* iPad Pro 12.9" Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {


	#fontlist-panel {
		width: auto;
		padding: 0;
	}

	#createLayer span p { margin: 0; /*margin-left: -300px; */padding: 0 500px; /* border: 1px solid #000000;*/ }

	/*** correct short words on ios appearing to the right ***/
	.lessThan4 {
		margin-left: -250px !important;
	}


}