/*Load Typefaces*/

@font-face {
    font-family: 'Atto Bold';
    src: url('../fonts/atto_bold_oblique-webfont.woff2') format('woff2'),
         url('../fonts/atto_bold_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: oblique;

}
@font-face {
    font-family: 'Atto Bold';
    src: url('../fonts/atto_bold-webfont.woff2') format('woff2'),
         url('../fonts/atto_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Atto Heavy';
    src: url('../fonts/atto_heavy-webfont.woff2') format('woff2'),
         url('../fonts/atto_heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Atto Heavy';
    src: url('../fonts/atto_heavy_oblique-webfont.woff2') format('woff2'),
         url('../fonts/atto_heavy_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: oblique;

}
@font-face {
    font-family: 'Atto Light';
    src: url('../fonts/atto_light_oblique-webfont.woff2') format('woff2'),
         url('../fonts/atto_light_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: oblique;

}
@font-face {
    font-family: 'Atto Light';
    src: url('../fonts/atto_light-webfont.woff2') format('woff2'),
         url('../fonts/atto_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Atto Medium';
    src: url('../fonts/atto_medium_oblique-webfont.woff2') format('woff2'),
         url('../fonts/atto_medium_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: oblique;

}
@font-face {
    font-family: 'Atto Medium';
    src: url('../fonts/atto_medium-webfont.woff2') format('woff2'),
         url('../fonts/atto_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Atto Regular';
    src: url('../fonts/atto_oblique-webfont.woff2') format('woff2'),
         url('../fonts/atto_oblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: oblique;

}
@font-face {
    font-family: 'Atto Regular';
    src: url('../fonts/atto-webfont.woff2') format('woff2'),
         url('../fonts/atto-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*Font Classes*/

.light { font-family:'Atto Light', sans-serif; }
.regular { font-family:'Atto Regular', sans-serif; }
.medium { font-family:'Atto Medium', sans-serif; }
.bold { font-family:'Atto Bold', sans-serif; }
.heavy { font-family:'Atto Heavy', sans-serif; }

.oblique { font-style: oblique; }

/*Init*/

* {
	list-style:none;
	margin:0;
	outline:none;
	padding:0;
	text-decoration:none;
}

*::selection {
	background:#eee;
	color:#000;
}

a {
	border-bottom:1px solid #eee;
	color:#000;
}

a:hover {
	border-bottom:1px solid #000;
}

body {
	color:#000;
	font-family:'Atto Regular', sans-serif;
	font-size:10pt;
	line-height:14pt;
}

.clear { clear:both; }

div { 
	box-sizing: border-box;
}

#purchase, .container {
	transition: width .5s;
	-webkit-transition: width .5s;
}

.hold_question {
	display:inline-block;
	position:relative;
	width:17px;
}

a.question {
	background:url("../images/question.png") no-repeat;
	border:0;
	display:block;
	position:absolute;
	height:17px;
	left:0;
	top:-13px;
	width:17px;
}

/*Purchase*/

#purchase {
	background: #faf9f1;
    font-size: 0;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    width: 0vw;
    z-index: 99999;
}

#purchase.open {
	width: 50vw;
}

#mobile_close {
	background: #f8f8f8;
	border-right: 1px solid #000;
	bottom: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: none;
	left: 0;
	position: absolute;
	top: 0;
	width:10vw;
}

#mobile_close .rotate {
	transform: rotate( -90deg ) translate( 0, 50% );
	-moz-transform: rotate( -90deg ) translate( 0, 50% );
	-webkit-transform: rotate( -90deg ) translate( 0, 50% );
	transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	position: absolute;
	top: 33px;
	left: 50%;
}

#mobile_close .rotate a {
	border-bottom: 0;
	font-size: 10pt;
}

#fonts {
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
    box-sizing: border-box;
    height: 50vh;
    font-size: 10pt;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 50vw;
}

#fonts .end {
	border-top:1px solid #000;
	bottom:0;
	cursor:pointer;
	display:block;
	left:0;
	padding:20px;
	position:absolute;
	right:0;
}

#fonts .end .padding {
	padding-bottom:20px;
	position:relative;
}

#fonts .end .padding .add_to_cart {
	display:none;
	position:absolute;
	right:70px;
	top:0;
}

#fonts .end:hover .padding .add_to_cart {
	display:block;
}

#fonts .end .padding .font_style {
	left:0;
	position:absolute;
	top:0;
	width:auto;
}

#fonts .end .padding .font_price {
	position:absolute;
	right:0;
	top:0;
	width:auto;
}

#fonts .font_link {
	border-bottom:1px solid rgba(0,0,0,.2);
	cursor:pointer;
	display:block;
	height:26px;
	margin-bottom:8px;
	position:relative;
}

#fonts .font_link .add_to_cart {
	display:none;
	position:absolute;
	right:70px;
	top:0;
}

#fonts .font_link:hover .add_to_cart {
	display:block;
}

#fonts .font_link.last {
	border-bottom:1px solid transparent;
}

#fonts .font_link .font_name {
	left:0;
	position:absolute;
	top:0;
	width:auto;
}

#fonts .font_link .font_price {
	position:absolute;
	right:0;
	top:0;
	width:auto;
}

#checkout {
	background: #e9fafb;
    border-left: 1px solid #000;
    box-sizing: border-box;
    float: left;
    font-size: 10pt;
    height: 50vh;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 50vw;
}

#checkout .end {
	border-top:1px solid #000;
	bottom:0;
	display:block;
	left:0;
	padding:0;
	position:absolute;
	right:0;
}

#checkout .end .padding {
	overflow:hidden;
	padding:20px 0;
	position:relative;
}

#checkout .end a#license_less {
	border-bottom:0;
	border-right:1px solid #000;
	cursor:pointer;
	display:block;
	float:left;
	padding:20px 15px;
}

#checkout .end a#license_more {
	border-bottom:0;
	border-left:1px solid #000;
	cursor:pointer;
	display:block;
	float:right;
	padding:20px 15px;
}

#checkout .end .padding .font_style {
	left:0;
	position:absolute;
	top:0;
	width:auto;
}

#checkout .end .padding .font_price {
	position:absolute;
	right:0;
	top:0;
	width:auto;
}

#checkout .font_link {
	border-bottom:1px solid rgba(0,0,0,.2);
	cursor:pointer;
	display:block;
	height:26px;
	margin-bottom:8px;
	position:relative;
}

#checkout .font_link .add_to_cart {
	display:none;
	position:absolute;
	right:50px;
	top:0;
}

#checkout .font_link .remove_item {
	display:block;
	position:absolute;
	right:50px;
	top:0;
}

#checkout .font_link.last {
	border-bottom:1px solid transparent;
}

#checkout .font_link .font_name {
	left:0;
	position:absolute;
	top:0;
	width:auto;
}

#checkout .font_link .font_price {
	position:absolute;
	right:0;
	top:0;
	width:auto;
}

#checkout #total,
#checkout #pay {
	box-sizing:border-box;
	float:left;
	text-align:center;
	width:50%;
}

#checkout #pay .padding {
	padding-left:20px;
}

#checkout #total {
	border-right:1px solid #000;
}


/*Main Page*/

.container.open {
	box-sizing: border-box;
	width: 100vw;
}

.container {
	width: 50vw;
}

#container {
	position:relative;
	height:100vh;
	overflow:hidden;
}

#input {
	border:0;
	font-size:50pt;
	left:50%;
	opacity:0;
	position:absolute;
	text-align:center;
	top:50%;
	transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	width:50%;
}

/*Top*/

.col {
	display:inline-block;
}

#left {
	left:20px;
	position:absolute;
	top:18px;
}

#left .col {
	margin-right:32px;
}

#right {
	position:absolute;
	right:20px;
	top:18px;
}

#right .col {
	margin-left:19px;
}

#right .col #choose_style {
	border: 0;
}

#right .col #choose_style.not-selected {
	text-decoration: line-through;
}

#right .col #arrow {
	background:url("../images/arrow.jpg") no-repeat center center;
	cursor:pointer;
	display:inline-block;
	height:10px;
	width:9px;
}

#right .col #arrow.flipped {
	transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

#right .col #slider {
	background:url("../images/line.jpg") no-repeat center center;
	display:inline-block;
	height:9px;
	position:relative;
	width:105px;
}

#right .col #slider #slider_contain {
	margin-left:8px;
	margin-right:2px;
}

#right .col #slider #handle {
	background:url("../images/handle.jpg") no-repeat center center;
	cursor:ew-resize;
	height:15px;
	margin-left:-8px;
	left:50%;
	position:absolute;
	top:-3px;
	width:16px;
}

#dropdown {
	background:#fff;
	display:none;
	position:absolute;
	top:25px;
}

#dropdown a {
	border:0;
	display:block;
}

#mobile_nav {
	border-left: 1px solid #000;
	display:none;
}

/*Overlay*/

#overlay {
	background:rgba(255,255,255,.4);
	bottom:0;
	display:none;
	left:0;
	position:fixed;
	right:0;
	top:0;
	z-index: 99999;
}

#overlay .alert {
	border:1px solid #000;
	background:#fff;
	display:none;
	left:50%;
	max-width:500px;
	position:absolute;
	top:50%;
	transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	width:70vw;
}

#overlay .alert .padding {
	max-height:60vh;
	overflow:auto;
	padding:20px;
}

#overlay .alert #character_map.padding {
	padding:0;
}

#overlay .alert a.close_alert {
	border-top:1px solid #000;
	border-bottom:0;
	display:block;
	padding:20px;
	text-align:center;
}

/*Character Maps*/

#bottom {
	background:#fff;
	border:1px solid #000;
	display:none;
	height:60vh;
	left:50%;
	max-height:800px;
	max-width:800px;
	overflow:auto;
	position:fixed;
	top:50%;
	transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	width:80vw;
}

#character_map {
	
}

#character_map .section {
	border-bottom:1px solid rgba(0,0,0,.1);
	box-sizing:border-box;
	float:left;
	height:100px;
	padding:20px;
	width:50%;
}

#character_map .section.taller {
	height:200px;
}

#character_map .section td {
}

#character_map .section:nth-child( even ) {
	border-right:0;
}

#character_map .section .left {
	margin-bottom:5px;
	text-decoration:underline;
}

/*Footer*/

#footer {
	border-top:1px solid #000;
	font-size:9pt;
	margin-top:20px;
	padding:20px;
}

#footer .left { 
	float:left;
	width:50%;
}

#footer .right { 
	float:left;
	text-align:right;
	width:50%;
}


/*Media Queries*/

@media screen and ( min-width: 1100px ) {
	#purchase.open {
		width: 40vw;
	}
	
	.container {
		width: 60vw;
	}

	#checkout,
	#fonts,
	#mobile_nav {
		width: 40vw;
	}
}

@media screen and ( min-width: 1250px ) {
	#purchase.open {
		width: 35vw;
	}
	
	.container {
		width: 65vw;
	}

	#checkout,
	#fonts,
	#mobile_nav {
		width: 35vw;
	}
}

@media screen and ( min-width: 1400px ) {
	#purchase.open {
		width: 25vw;
	}
	
	.container {
		width: 75vw;
	}

	#checkout,
	#fonts,
	#mobile_nav {
		width: 25vw;
	}
}

@media screen and ( max-width: 1100px ) {
	.container.closed #input {
		width: 75% !important;
	}
}

@media screen and ( max-width: 950px ) {
	.container.closed #slider_col {
		display: none;
	}
}

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

	#purchase.open {
		width: 75vw;
	}
	
	.container {
		width: 100vw;
	}

	#checkout,
	#fonts,
	#mobile_nav {
		width: 75vw;
	}
	
	#checkout .end {
		border:0;
		padding:0;
	}
	
	#checkout #total,
	#checkout #pay {
		border:0;
		box-sizing:border-box;
		float:none;
		text-align:center;
		width:100%;
	}
	
	#checkout #total .padding,
	#checkout #pay .padding {
		border:0;
		border-top:1px solid #000;
		padding:20px 0;
	}
	
	#checkout .end a#license_less {
		border-top:1px solid #000;
	}

	#checkout .end a#license_more {
		border-top:1px solid #000;
	}
	
}
@media screen and ( max-width: 675px ) {
	
	#purchase.open {
		padding-left: 10vw;
		width: 100vw;
	}
	
	#main_purchase {
		width: 90vw;
	}
	
	.container {
		width: 100vw;
	}

	#checkout,
	#fonts,
	#mobile_nav {
		border-left: 0;
		width: 90vw;
	}
	
	#mobile_close {
		display: block;
	}
	
	#fonts {
		border-right:0;
	}
	
	#checkout {
		display:none;
	}
	
	.mobile_hide {
		display:none;
	}
	
	#mobile_nav {
		display:block;
	}
	
	#mobile_nav a {
		box-sizing:border-box;
		border:0;
		color:#000;
		display:block;
		float:left;
		font-size:10pt;
		line-height:14pt;
		padding:20px 0;
		text-align:center;
		width:50%;
	}
	
	#mobile_nav a#mobile_nav_1 {
		background:#faf9f1;
		border-bottom:1px solid #000;
		border-right:1px solid #000;
	}
	
	#mobile_nav a#mobile_nav_2 {
		background:#e9fafb;
		border-bottom:1px solid #000;
	}
	
	#slider_col {
		display:none;
	}

	#character_map {
		float:none;
		border-left:0;
		width:100%;
	}
	
	#character_map .section {
		border-bottom:1px solid rgba(0,0,0,.1);
		float:none;
		padding-bottom:20px;
		width:100%;
	}

	#character_map .section div {
		display:inline-block;
		vertical-align:top;
		width:47%;
	}
	
	#character_map .section div:nth-child(odd) {
		clear:both;
	}
	
	#character_map .section {
		height:auto;
	}

	#character_map .section.taller {
		height:auto;
	}
	
}

@media screen and ( min-width: 675px ) and ( max-height: 600px ) {
	
	#fonts {
		border-right:0;
	}
	
	#checkout {
		display:none;
	}
	
	.mobile_hide {
		display:none;
	}
	
	#mobile_nav {
		display:block;
	}
	
	#mobile_nav a {
		box-sizing:border-box;
		border:0;
		color:#000;
		display:block;
		float:left;
		font-size:10pt;
		line-height:14pt;
		padding:20px 0;
		text-align:center;
		width:50%;
	}
	
	#mobile_nav a#mobile_nav_1 {
		background:#faf9f1;
		border-bottom:1px solid #000;
		border-right:1px solid #000;
	}
	
	#mobile_nav a#mobile_nav_2 {
		background:#e9fafb;
		border-bottom:1px solid #000;
	}
	
}

@media screen and ( max-width:550px ) {
	
	#character_map .section div {
		display:block;
		width:100%;
	}
	
	#input {
		width: 75% !important;
	}
	
}

#dl-container {
	background: #f8f8f8;
	margin: 50px auto;
	min-height: 100vh !important;
	min-width: 90%;
	padding: 20px;
	width: 800px;
}