/* LESS Document */
@import "elements.less";
.normalfont{
	font-family: 'Droid Serif', serif;
}
.headfont{
	font-family: 'Titillium Web', sans-serif;
}
.boosterfont{
	font-family: 'Pacifico', cursive;
}
.hide{
	display:none !important;
}
body{
	margin:0;
	padding:0;
	font-size:14px;
	overflow-x:hidden;
	position:relative;
	.normalfont;
	h1,h2,h3,h4,h5,h6{
	  .headfont;
	  font-weight:900;
	}
	div{
		box-sizing: border-box;
	}
}
.align-center{
	text-align:center;
}
.nc_animated{
	-webkit-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	transition:all .2s ease-out; 
}
.imagebutton{
	position:relative;
	display:inline-block;
	.normal, .hover{
		position:absolute;
		top:0;
		left:0;
		.opacity(1);
	}
	.hover{
		.opacity(0);
	}
	.disabled{
		.opacity(0);
	}
}
.imagebutton:hover{
	.normal{
		.opacity(0);
	}
	.hover{
		.opacity(1);
	}
}
.ctabutton{
	display:inline-block;
	position:relative;
	text-decoration:none;
	width:175px;
	height:50px;
	.normal, .hover{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		.opacity(1);
	}
	.hover{
		.nc_animated;
		.opacity(0);
	}
	span{
		text-decoration:none;
		.nc_animated;
		display:block;
		width:175px;
		height:50px;
		line-height:50px;
		text-transform:uppercase;
		position:absolute;
		top:0;
		left:0;
		font-weight:900;
		color:#181F39;
		text-align:center;
	}
}
.ctabutton.longcta{
	.normal, .hover{
		diaplay:none;
	}
	span{
		background-color:#EA3624;
	}
}
.ctabutton:hover{
	text-decoration:none;
	.hover{
		.opacity(1);
	}
	span{
		color:#E4D1BA;
	}
}
a.applink{
	text-decoration:underline;
	color:#EA3624;
}
a.applink:hover{
	text-decoration:none;	
}
.largescreen{
	
}
.smallscreen{
	display:none;
}
.gameboard{
	height:100vh;
	position:relative;
	overflow:hidden;
	.header{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		background:rgba(0,0,0,0.55);
		padding-top:10px;
		padding-bottom:10px;
		text-align:center;
		.applogo{
			background:url(../images/l/porta-logo.png);
			width:151px;
			height:119px;
			display:inline-block;
		}
	}
	.pocket{
		position:absolute;
	    bottom: 51px;
	    left: 50px;
	    width: 164px;
	    height: 202px;
		a{
			left:0;
			top:0;
			bottom:auto;
			width:164px;
			height:202px;
		}
	}
	.footer{
		position:absolute;
		bottom:0;
		left:0;
		height:51px;
		width:100%;
		background-image:url(../images/l/footerborder.jpg);
	}
	.leftbutton{
		position:absolute;
		top:50%;
		left:0;
		width:100px;
		height:100px;
		margin-top:-50px;
	}
	.rightbutton{
		position:absolute;
		top:50%;
		right:0;
		width:100px;
		height:100px;
		margin-top:-50px;
	}
	.shop_container{
		position:absolute;
		top:0;
		left:0;
		width:10450px;
		height:1080px;
		cursor:ew-resize;
		cursor:-webkit-grab;
		.shop{
			position:absolute;
			width:100%;
			height:100%;
			.hd_image, xs_image{
				position:absolute;
				top:0;
				left:0;
			}
			.disabled{
				cursor: ew-resize;
    			cursor: -webkit-grab;
				.normal{
					.opacity(0);
				}
				.hover{
					.opacity(0);
				}
				.disabled{
					.opacity(1);
				}
			}
			.item{
				position:absolute;
			}
			.item1{
				width:187px;
				height:192px;
				top: 431px;
    			left: 578px;
			}
			.item2{
				width:155px;
				height:228px;
				top: 710px;
    			left: 3306px;
			}
			.item3{
				width:190px;
				height:136px;
				top: 587px;
    			left: 9340px;
			}
			.item4{
				width:159px;
				height:82px;
			    top: 767px;
			    left: 2650px;
			}
			.item5{
				width:159px;
				height:82px;
				top: 773px;
    			left: 4666px;
			}
			.item6{
				width:236px;
				height:134px;
				top: 770px;
				left: 1005px;
			}
			.item7{
				width:156px;
				height:189px;
				top: 442px;
    			left: 1114px
			}
			.item8{
				width:257px;
				height:150px;
				top: 255px;
    			left: 5460px;
			}
			.item9{
				width:133px;
				height:107px;
				top: 371px;
    			left: 7320px;
			}
			.item10{
				width:156px;
				height:144px;
			    left: 9693px;
			    top: 191px;
			}
			.usher{
				width:511px;
				height:795px;
				bottom:0;
				right:20px;
				.extra{
					position:absolute;
					top: -128px;
    				left: 268px;
					display:none;
				}
			}
			.quest{
				.extra{
					display:block;
				}
			}
			.usher:hover{
				.extra{
					display:none;
				}
			}
		}
	}
	.shop_container.grabbing{
		cursor:-webkit-grabbing;
	}
}

.popbg{
	position:absolute;
	z-index:10;
	width:100%;
	height:100%;
	top:0;
	left:0;
	color:#151D32;
	background:url(../images/l/lightboxbg.png) center center;
	overflow:hidden;
	.popcontainer{
		position:relative;
		width:100%;
		height:100%;
	}
	.specialbox{
		width:90%;
		max-width:700px;
		min-width:300px;
		position:relative;
		margin:0 auto;
		height:100%;
		.content{
			position:absolute;
			width:450px;
			top:241px;
			background-color:#151D32;
			color:#E4D1BA;
			padding:20px 20px 10px;
			.rounded(10px);
			p{
				font-style:italic;
				text-align:center;
			}
			.btn_container{
				.ctabutton{
					margin:0 10px;
				}
			}
			.footer{
				background:url(../images/l/border3.png) center center;
				width:calc(~"100% + 40px");
				height:27px;
				margin:10px -20px 2px;
			}
		}
		.content:after{
			display:block;
			content:"";
			position:absolute;
			bottom:25%;
			right:-30px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px 0 0 40px;
			border-color: transparent transparent transparent #151d32;
		}
		.usher{
			width:511px;
			height:795px;
			background:url(../images/l/front-character2.png);
			position:absolute;
			top:313px;
			left:50%;
			display:none;
		}
	}
	.specialbox{
		.content{
			position:relative;
			top:0;
			width:auto;
			margin-top:168px;
			.mini-usher{
				width:334px;
				height:186px;
				position:absolute;
				top:-160px;
				left:50%;
				margin-left:-167px;
				background:url(../images/s/m-front-character2.png);
			}
		}
		.content:after{
			display:none;
		}
		.mini-usher{
			display:block;
		}
	}
	.popoutbox{
		width:90%;
		max-width:700px;
		min-width:300px;
		position:relative;
		margin:0 auto;
		top:100px;
		background-color:#E4D1BA;
		border:solid 5px #EA3624;
		min-height:300px;
		padding:70px 30px 0;
		background-image:url(../images/l/stamp-lightbox.png);
		background-repeat:no-repeat;
		background-position:0 0;
		.shelter{
			position:absolute;
			width:300px;
			height:81px;
			margin-left:-150px;
			left:50%;
			top:-80px;
			background:url(../images/l/headlightbox.png);
		}
		.logo{
			position:absolute;
			width:112px;
			height:105px;
			margin-left:-56px;
			left:50%;
			top:-50px;
			background:url(../images/l/porta-logo2.png);
		}
		.footer{
			position:absolute;
			width:100%;
			height:14px;
			left:0;
			bottom:10px;
			background:url(../images/l/border2.png) center center;
		}
		.closebtnbox{
			position:absolute;
			top:7px;
			right:7px;
			width:26px;
			height:26px;
			a{
				width:26px;
				height:26px;
			}
		}
	}
	.itemofinterest, .hiddenitem, .viewpuzzle, .enteremail{
		min-height:400px;
		.content{
			position:relative;
			width:300px;
			.name{
				text-align:center;
				padding:0;
				margin:0;
				color:#161C32;
			}
			.description{
				position:relative;
				background-color:#151D32;
				color:#E4D2BA;
				font-style:italic;
				padding:20px;
				.rounded(10px);
			}
			.description:after{
				display:block;
				content:"";
				position:absolute;
				bottom:50%;
				right:-30px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 20px 0 0 40px;
				border-color: transparent transparent transparent #151d32;
			}
			.ctabutton_container{
				margin:10px 0 50px;
			}
		}
		.mini-usher{
			position:absolute;
			width:314px;
			height:423px;
			background:url(../images/l/c2.png) no-repeat;
			bottom:0;
			right:0;
		}
	}

	.hiddenitem{
		.mini-usher{
			background:url(../images/l/c4.png) no-repeat;
			width:314px;
			height:416px;
		}
	}

	.viewpuzzle{
		min-height:500px;
		.mini-usher{
			background:url(../images/l/c1.png) no-repeat;
			width:326px;
			height:464px;
		}
		.booster{
			margin:10px; 
			.boosterfont;
			color:#EA3624;
		}
	}

	.enteremail{
	    min-height: 516px;
		.content{
			top: 25px;
			h1{
				text-align:center;
				text-transform:uppercase;
				line-height: 1em;
			    margin-top: 0;
			    margin-bottom: 0;
			}
			h4{
				line-height: 1em;
			    margin: 10px;
			    font-weight: 100;
			    text-transform: uppercase;
			    text-align: center;
			}
			input[type="text"], input[type="email"]{
				padding:10px 20px;
				width:100%;
				box-sizing:border-box;
				text-align:center;
				margin-top:10px;
			}
			.errormessage{
				color:#EA3624;
				font-size:11px;
				display:block;
				font-style:italic;
				margin:5px;
			}
			.checkboximage{
				width:11px;
				height:10px;
				position:relative;
				display:inline-block;
				img{
					position:absolute;
					top:0;
					left:0;
				}
			}
			label{
				display:block;
				margin-top:10px;
			}
			input[type="checkbox"]{
				display:none;
			}
			input[type="checkbox"] + label{
				.checkboximage{
					.unchecked{
						display:block;
					}
					.unchecked-hover{
						display:none;
					}
					.checked{
						display:none;
					}
				}
			}
			input[type="checkbox"]:checked + label{
				.checkboximage{
					.unchecked{
						display:none;
					}
					.unchecked-hover{
						display:none;
					}
					.checked{
						display:block;
					}
				}
			}
		}
		.mini-usher{
			background:url(../images/l/c3.png) no-repeat;
			width:444px;
			height:474px;
		}
	}

	.viewchiper{
		.content{
			position:relative;
			.chiper{
				float:left;
				width:50%;
				img{
					margin-bottom:30px;
				}
			}
			.inputs{
				float:left;
				width:50%;
				h1{
					text-align:center;
					text-transform:uppercase;
				}
				.inputfield{
					padding:10px 20px;
					width:100%;
					box-sizing:border-box;
					text-align:center;
				}
				.puzzle{
					margin:10px 0;
				}
				.errormessage{
					color:#EA3624;
					font-size:11px;
					text-align:center;
					display:block;
					font-style:italic;
				}
				.ctabutton_container{
					margin:10px 0 50px;
				}
			}
		}
		.content:after{
			content:"";
			clear:both;
			display:block;
		}
	}

	.acknowledgement{
	    .content{
	    	position:relative;
	    	.leftbox{
	    		float:left;
	    		width:50%;
	    		min-height:300px;
	    		position:relative;
	    	}
	    	.box{
	    		width:240px;
	    		height:269px;
	    		position:absolute;
	    		top:50%;
	    		left:50%;
	    		background:url(../images/l/box_spritesheet.png);
	    		margin-left:-120px;
	    		margin-top:-165px;
	    	}
	    	.rightbox{
	    		float:left;
	    		width:50%;
	    		min-height:300px;
	    	}
			h1{
				text-align:center;
				text-transform:uppercase;
				line-height: 1em;
			    margin-top: 0;
			    margin-bottom: 0;
			}
			h4{
				line-height: 1em;
			    margin: 30px 10px;
			    font-weight: 100;
			    text-transform: uppercase;
			    text-align: center;
			}
			.ctabutton_container{
	    		margin-bottom:50px;
	    	}
		}
		.content:after{
			display:block;
			content:"";
			clear:both;
		}
	}
}

.popbg2{
	background:url(../images/l/lightbox2bg.png) center center;
}

@media only screen and (min-width: 736px) and (min-height: 414px){
	.popbg{
		.specialbox{
			.content{
				position:absolute;
				width:450px;
				top:50px;
				margin-top: 0;
				.mini-usher{
					display:none;
				}
			}
			.content:after{
				display:block;
				content:"";
				position:absolute;
				bottom:25%;
				right:-30px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 20px 0 0 40px;
				border-color: transparent transparent transparent #151d32;
			}
			.usher{
				width:511px;
				height:795px;
				background:url(../images/l/front-character2.png);
				position:absolute;
				top:113px;
				left:50%;
				display:block;
			}
		}
	}
}

@media only screen and (min-width: 736px) and (min-height: 700px){
	.popbg{
		.specialbox{
			.content{
				top:141px;
			}
			.usher{
				top:213px;
			}
		}
	}
}

@media only screen and (min-width: 736px) and (min-height: 1000px){
	.popbg{
		.specialbox{
			.content{
				top:241px;
			}
			.usher{
				top:313px;
			}
		}
	}
}


@media only screen and (max-width: 1366px){
	.largescreen{
		display:none;
	}	
	.smallscreen{
		display:inline-block;
	}
	.gameboard{
		.leftbutton, .rightbutton{
			width:50px;
			height:50px;
			margin-top:-25px;
		}
		.header{
			.applogo{
				background-size:cover;
				width:75px;
				height:60px;
			}
		}
		.footer{
			height:33px;
			background-image:url(../images/s/m-footerborder.jpg);
		}
		.pocket{
		    bottom: 33px;
    		left: 10px;
		    width: 70px;
		    height: 86px;
			a{
				left:0;
				top:0;
				bottom:auto;
				width: 70px;
		   		height: 86px;
			}
		}
	}
}

@media only screen and (max-width: 735px){
	img{
		max-width:100%;
	}
	.popbg{
		min-height:0;
		.popoutbox{
			background-image:url(../images/s/m-stamp-lightbox.png);
			background-position:0 0;
		}
		.itemofinterest, .hiddenitem, .viewpuzzle{
			width:calc(~"100% - 10px");
			min-height:0;
			.content{
				width:auto;
				.description:after{
					display:none;
				}
			}
		}
		.enteremail{
			.content{
				width:auto;
				top:0;
			}
		}
		.mini-usher{
			display:none;
		}
		.specialbox{
			.mini-usher{
				display:block;
			}
		}
		.viewchiper{
			.content{
				.chiper, .inputs{
					float:none;
					width:100%;
				}
				.chiper{
					img{
						margin-bottom:0;
					}
				}
			}
		}
		.acknowledgement{
		    .content{
		    	.leftbox{
		    		float:none;
		    		width:100%;
		    		min-height:279px;
		    		position:relative;
		    	}
		    	.box{
		    		width:240px;
		    		height:269px;
		    		position:absolute;
		    		top:50%;
		    		left:50%;
		    		background:url(../images/l/box_spritesheet.png);
		    		margin-left:-120px;
		    		margin-top:-135px;
		    	}
		    	.rightbox{
		    		float:none;
		    		width:100%;
		    		padding-bottom:50px;
		    	}
			}
		}
	}
}