/*

Master.css
	
*/

.modal {
  position: absolute;
	top: 0;
}

/*scroll bar ----------------------------------*/
::-webkit-scrollbar {width: 0px; background: transparent;}
html::-webkit-scrollbar { display: none;}

/*Page Layout--------------------------------- */
html{overflow-y: hidden; overflow-x: hidden;}
body{
	background: url(../images/woodbackground.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100vh;
	min-height: stretch; 
	min-height: -webkit-fill-available;
	min-height: -moz-available;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw; 
	font-family: 'Poppins', sans-serif;
	color: white;
 }
html {
  min-height: -webkit-fill-available;
	min-height: stretch; 
	min-height: -moz-available;
	height: calc(var(--vh, 1vh) * 100);
}
.top{height: 14.2%; width: 100%; display: flex; position: relative;}
.mid{height: 72.3%; width: 100%; background-color: rgba(0,0,0,0.5); overflow-y: scroll;}
.bottom{height: 13.5%; width: 100%;}
.bottom2{height: 13.5%; width: 100%;}
.indexBottom{width: 100%; height: 100%; display: flex;}
.footNav{width: 100%; height: 100%; display: flex; margin: auto auto;}
.catIconHead{position: relative;}
.catIconHead span {position: relative; top: 30%; left: 54%; font-size: 3.8vh; }

/*general settings ------------------------------ */
.blue{color:#007BFF;}
.flex{display: flex;}
.marginAutoAuto{margin: auto auto;}
.marginAutoLeft{margin: auto 10px;}
.aliceBlue{ background-color: aliceblue;}
.italic {font-style: italic;}
.hidden{display: none;}
a:link, a:hover, a:active{text-decoration: none;}
a, a:hover { color: inherit; } 
input:focus{outline: none;}
.sfont{font-size: 1.5em;}
.smallishFont{font-size: .9em}
.smallFont{font-size: 0.7em;}
.smallerFont{font-size: 0.6em;}
.supersmallFont{font-size: 0.5em;	overflow-x: hidden;}

 /*logo header ------------------------------- */
.logo{display: flex; margin: auto auto; width: 96%; height: 100%;}
.logo img{margin: auto auto; display: flex;}
.catIconHead{display: flex; margin: auto auto; height: 100%;}
.catIconHead img{margin: auto auto; height: 90%; }
 
/*canel button footer  ------------------------------- */
.cancelButton{
 	height: 70%; 
	display: flex; 
	margin: auto auto; 
	border-radius: 10px; 
}
.cancelButton2{
 	height: 100%; 
	display: flex; 
	margin: auto auto; 
}
.cancelButton span{margin: auto auto;} 
.cancelButton img{margin: auto auto; height: 80%;}
.cancelButton2 img{margin: auto auto; height: 60%;} 
.dark{background-color: #343A40; border-radius: 5px 5px 5px 5px !important;}

/*footer controls (back and cart icon) */ 
.cartFoot {width: 50%; height: 100%; display: flex; position: relative;}
.cartFoot a {margin: auto auto;}
.backFoot, .nextFoot{width: 50%; height: 100%; display: flex; }
.cartFootNumber {margin: auto auto;}
.cartFootNumber span{ position: absolute; top: 31.5%; left: 47.5%; font-size: 3.3vh;}
.backFoot img{height: 11vh; margin: auto auto; display: flex;}
.next img {height: 11vh; margin: auto auto; display: flex;}
.cartFoot img{height: 11vh; margin: auto auto; display: flex;}
.cart_number{position: relative;}

/*stil need to work this one out later... used to hide things when keyboard pops up*/
/*

@media only screen and (max-height: 360px)
{   
	.top{ display: none;}
	.bottom{ display: none; }
	.hide{display: none;}
}

*/

/* RESONPONSIVE CSS ***********************************************************************************/ 


/* Generic Small Phone */
 .footNav {max-width: 290px;} 
 .logo img{max-width: 96%;}
 .next img{ max-width: 110px;}
 .cancelButton{max-width: 335px; font-size: 2em;}
 .cart_number{font-size: 1.5em; top: 4px; left: -42px;}

/* Medium Screen  */
@media (min-width: 600px) and (orientation : portrait)
{  
	.logo img{width: 96%; max-width: 530px;}
	.cancelButton {font-size: 4em; 	max-width: 450px;}
  .footNav{max-width: 450px;}
  .next img{ max-width: 180px;}
	
}
 

/* Large Screen */
@media (min-width: 768px) and (orientation : portrait) 
{ 
	.logo img {width: 96%; max-width: 90%;}
	.cancelButton {font-size: 4em; 	max-width: 600px;}
	.footNav{max-width: 480px;}
  .next img{ max-width: 250px;}
	 
}

/* Generic Small Screen Landscape */
@media (orientation : landscape)
{
	.logo img{width: 96%; max-width: 140px;}
	.cancelButton {font-size: 1.2em; 	max-width: 185px;}
  .footNav{max-width: 148px;}
	
}

/* Medium Screen Landscape */
@media (min-width: 855px) and (orientation : landscape)
{
	.logo img{width: 96%; max-width: 400px;}
	.cancelButton{max-width: 350px; font-size: 2.5em;}
 	.footNav{max-width: 320px;}
}

/* large Screen Landscape */
@media (min-width: 1290px) and (orientation : landscape)
{
	.logo img{width: 96%; max-width: 500px;}
	.cancelButton {font-size: 2.5em; 	max-width: 400px;}
	.cart_n span{  font-size: 2.5em;}
	.controls_bottom{max-width: 510px;}
	.right_bottom img{width: 60%;}
  .left_bottom img{width: 50%;}
  .next img{ width: 100%;}
	
}

/* PHONE SPECIFIC ********************************************************************************/ 

/* iPhone 5 */
@media screen 
and (device-width: 320px) 
and (device-height: 568px) 
{
  .logo img{width: 96%; max-width: 290px;}
	.cancelButton {	max-width: 290px;}
	.footNav{max-width: 230px;}

}

/* iPhone 4 */
@media screen 
and (device-width: 320px) 
and (device-height: 480px) 
{ 
  .logo img{width: 96%; max-width: 270px;}
	.cancelButton {max-width: 270px;}
	.right_bottom img{width: 50%;}
  .left_bottom img{width: 40%;}
  .next img{ width: 55%;}

}
/* Galaxy Fold  */
@media (max-width: 286px) and (orientation : portrait)
{  
	.logo img{width: 90%; max-width: 90%;}
	
}

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

	
	.logo img{width: 70%; max-width: 70%;}
	.mid {font-size: 0.8em;}
	
	
}
*/


.orange{background: #27A744 !important; }