html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'subwayregular';
    src: url('../fonts/subway-webfont.eot');
    src: url('../fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/subway-webfont.woff2') format('woff2'),
         url('../fonts/subway-webfont.woff') format('woff'),
         url('../fonts/subway-webfont.ttf') format('truetype'),
         url('../fonts/subway-webfont.svg#subwayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dottyregular';
    src: url('../fonts/dotty-webfont.eot');
    src: url('../fonts/dotty-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dotty-webfont.woff2') format('woff2'),
         url('../fonts/dotty-webfont.woff') format('woff'),
         url('../fonts/dotty-webfont.ttf') format('truetype'),
         url('../fonts/dotty-webfont.svg#dottyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




html, body {
height:100%;
width:100%;

background-color:#999;
 /*overflow-x: hidden; */
  overflow-y: hidden;
	padding:0;
	margin:0;
}

.background{
	
height:70%;
width:auto;	
}

.background img{
	position:relative;
	height:100%;
	width:auto;	
	
}


.overlay{
	
	position:absolute;
	height:100%;
	width:100%;
	background-color:rgba(0,0,0,.75);
	top:0;
	left:0;	
	
}

.popUp{
	position:relative;
	margin:auto;
display:block;
width:50%;
height:50%;
background-color:#1a451f;	
margin-top:50px;
border:#FFF solid 3px;

}

#btnClose{
	position:absolute;
	right:0;
	margin:10px;
	cursor:pointer;
}	

#popUpTitle p{
	padding:10px;
	font-family:'subwayregular';
	color:#FF0;
	display:inline-block;
	margin:10px;
	font-size:32px;
}

#popUpText p{
	padding:15px;
	color:#FFF;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px
}

#sandwichPopUp{
text-align:center;	
}

#osh { position:absolute; top:0; left:0; height:70%; }


.drop{
display:inline-block;
width:21%;
margin-right:2%

}

#drop3{
margin-left:18%	
}

.dropdownHolder{
	position:absolute;
	/*background-color:#F00;*/
	width:100%;
	top:43%
}


.dropdown{

   background:#1a451f;
   color:#fff;
   width: 100%;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   margin-left:10%;
   
   /*-webkit-appearance: none;*/
   	
}



select[disabled] { background-color: #666; }

.trayHolder{
width:100%;
height:30%;
margin-top:15px;	
}
.trayHolder img{
	width:100%;
	height:auto;
	cursor:pointer
}

#trayItems{
	position:relative;
width:50%;	
}


#dragTray{
	float:right;
color:#FF0;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	margin-right:50px
}

#dragTray p{
font-size:20px;	
}

#dragTray img{
float:right;
height:100%;
width:auto;	
}

#dragTrayReset{
	position:relative;
	
	color:#FF0;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	margin-top:50px;
	margin-left:20px;
	cursor:pointer;	
}




#sandwich{
position: absolute;
top: -75%;
left:0;
margin-left: 7%;
width: 60%;
}

#receipt{
	padding:10px;
font-family:'dottyregular';
text-align:center;
	position:absolute;
	top:0;
	
display:block;
width:25%;
height:60%;
background-color:#FFF;
margin-left:10%;
margin-top:5%;
border:#000 solid 2px;
}

#receiptTop{
margin-top:10px;	
}

#receiptSentence0, #receiptSentence1, #receiptSentence2, #receiptSentence3, #receiptSentence4{
	font-size:2em;	
	margin-top:10px;
}

#receiptBottom{
	margin-top:50px;
position:relative;
bottom:0;	
}

#printBtn{
	position:relative;
	font-family:'subwayregular';
	float:right;
	margin-right:20px;
	margin-top:20px;
display:block;
color:#FF0;
font-size:2em;
border:#FFF solid 2px;
padding:3px;
cursor:pointer;

	
}


.footer{
	position:absolute;
	bottom:0;
	background-color:#1a451f;
	height:10%;
	width:100%
}	

#sentenceCount, #prevSentence{
	font-family:'subwayregular';
	color:#FF0;
	display:inline-block;
	margin:10px;
	font-size:32px;
}	

#counter, #sentenceDisplay{
	color:#FFF;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px
}

#bottom1, #bottom2{
	width:100%;
	text-align:center;
}


/*IPAD LANDSCAPE****************************************************************************************************/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

#sentenceCount, #prevSentence{
	font-size:24px;
}	

#counter, #sentenceDisplay{
	font-size:18px
}


#bottom1, #bottom2{
	width:auto;
	text-align:left;
	float:left;
}

#printBtn{
	position:absolute;
	font-family:'subwayregular';
	float:right;
	right:20px;
	bottom:65px;
display:inline-block;
background-color:#1a451f;

	
}

#receipt{
	position:absolute;
	display:block;
	width:25%;
	top:10px;
	left:25%;
	height:auto;

}

.dropdown{

   background:#1a451f;
   color:#fff;
   width: 170px;
   padding: 5px;
   font-size: 12px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   margin-left:15px;
   margin-right:15px;
   -webkit-appearance: none;
   	
}


}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
.background{
	
height:40%;
width:auto;	
}

.dropdown{

   width: 160px;
   padding: 5px;
   font-size: 12px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   margin-left:15px;
   margin-right:25px;
   -webkit-appearance: none;
   	
}

.dropdownHolder{
	position:absolute;
	/*background-color:#F00;*/
	width:100%;
	top:17%
}


#receipt{
	position:absolute;
	display:block;
	width:25%;
	top:10px;
	left:30%;
	height:auto;

}

}

/*MEL LAPTOP MEDIA QUERY ******************************************************/
@media only screen and (min-width:1300px) and (max-height:653px) { 
	/* CSS rules here */


#sentenceCount, #prevSentence{
	font-size:24px;
}	

#counter, #sentenceDisplay{
	font-size:18px
}


#bottom1, #bottom2{
	width:auto;
	text-align:left;
	float:left;
	width:auto;
}

.dropdown{

   width: 160px;
   padding: 5px;
   font-size: 14px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   margin-left:15px;
   margin-right:25px;
   -webkit-appearance: none;
   	
}

.dropdownHolder{
	position:absolute;
	/*background-color:#F00;*/
	width:100%;
	top:17%
}

#receipt{
	position:absolute;
	display:block;
	width:25%;
	top:10px;
	left:30%;
	height:auto;

}

#printBtn{
	position:absolute;
	font-family:'subwayregular';
	float:right;
	right:20px;
	bottom:65px;
display:inline-block;
background-color:#1a451f;

	
}
	
	
}

 @media screen and (max-width: 1366px) and (max-height: 656px) and (min-height:300px) {
  #popUpText p {
  padding: 15px;
  color: #FFF;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
}