.cellonlyshow {display: none; } /* !!!! may conflict with other cellonly show if visibility: hidden is active... also check @media "cellhidden"

/* migrate to paypal css */

/* form table {display: none;}  /* if the paypal button stops working, then switch to visibility: hidden instead of display; none;  also change in @media cell below */



.smallerimages { 
display: inline-block;
width: 100%;
text-align: center;
padding: 0;
margin: 0;
border: 1px solid red;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
}

.menueImage /*agl rulekind: base;*/ { 
display: inline-block; 
float: none; 
width:222px;
padding: 10px; 
margin: 10px;
border: 1px solid #000;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
	   -webkit-transition:  border 0.3s steps(30);
	   -moz-transition: border 0.3s steps(30);
	   -o-transition: border 0.3s steps(30);
	   -ms-transition: border 0.3s steps(30);
	   transition: border 0.3s steps(30);
}

.menueImage img /*agl rulekind: base;*/ { 
width: 200px;
box-sizing: border-box;
border-radius: 25px;
overflow-y: hidden;
}

.menueImage2 /*agl rulekind: base;*/ { 
display: inline-block; 
float: none; 
width:222px;
padding: 10px; 
margin: 10px;
border: 1px solid #000;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
	   -webkit-transition:  border 0.3s steps(30);
	   -moz-transition: border 0.3s steps(30);
	   -o-transition: border 0.3s steps(30);
	   -ms-transition: border 0.3s steps(30);
	   transition: border 0.3s steps(30);
}
.menueImage2 img /*agl rulekind: base;*/ { 
width: 200px;
box-sizing: border-box;
border-radius: 25px;
overflow-y: hidden;
}

.menueImage3 /*agl rulekind: base;*/ { 
display: inline-block; 
float: none; 
width:322px;
padding: 10px; 
margin: 10px;
border: 1px solid #000;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
	   -webkit-transition:  border 0.3s steps(30);
	   -moz-transition: border 0.3s steps(30);
	   -o-transition: border 0.3s steps(30);
	   -ms-transition: border 0.3s steps(30);
	   transition: border 0.3s steps(30);
}
.menueImage3 img /*agl rulekind: base;*/ { 
width: 300px;
box-sizing: border-box;
border-radius: 25px;
overflow-y: hidden;
}

.ds263 /*agl rulekind: base;*/ { 
	font-family: Raleway, Arial;
	font-size: 14px; 
	letter-spacing: 4px; 
	color: #000000;
	   -webkit-transition:  /*letter-spacing 0.3s steps(30), */color .7s linear ;
	   -moz-transition: /*letter-spacing 0.3s steps(30), */color .7s linear ;
	   -o-transition: /*letter-spacing 0.3s steps(30), */color .7s linear ;
	   -ms-transition: /*letter-spacing 0.3s steps(30), */color .7s linear ;
	   transition: /*letter-spacing 0.3s steps(30), */color .7s linear;
}
/* attempt to get touch screens not to have the hover effect, but only devices greater than 40em */
@media only screen and (min-width: 40em) {
.menueImage:hover .ds263 { visibility: visible; color: #606060; /*letter-spacing: 7px;*/ }
.menueImage:hover { border: 1px solid #404040;}
.menueImage .ds263 { visibility: hidden; } /* hides text below pictures then hover reveils it */
.menueImage2:hover .ds263 { visibility: visible; color: #606060; /*letter-spacing: 7px;*/ }
.menueImage2:hover { border: 1px solid #404040;}
.menueImage2 .ds263 { visibility: hidden; } /* hides text below pictures then hover reveils it */
.menueImage3:hover .ds263 { visibility: visible; color: #606060; /*letter-spacing: 7px;*/ }
.menueImage3:hover { border: 1px solid #404040;}
.menueImage3 .ds263 { visibility: hidden; } /* hides text below pictures then hover reveils it */
}

/* for pop up window */

PopupText { max-width: 50%;  display: inline-block; float: none; }

/* removed to fix linking to popup1 "popup1 { height: auto; width: auto; float: none; padding: 10px; }" /* not covering all the website in greyed out on popup*/


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: all 600ms linear;
  display: none; /*changed from visibility: hidden ... change display/visibility in overlay target and @em40 as well or it won't work on cell*/
  opacity: 0;
}

/* migrate to paypal css */
.overlay:target {
  opacity: 1;
  z-index: 10000;
  display: inline-block; /*changed from visibility: visible */
}

/* migrate to paypal css */
.popup .close {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 40px;
  font-weight: normal;
  text-decoration: none;
  color: #ff3333;
}

/* i don't think I need this original code from popup 
".popup img { float: left; display: inline-block; width: 45%; height: auto;}" 
*/

/* migrate to paypal css */
.popup .close:hover {
  color: #444;
}

.popup {
  margin: 20px auto;
  padding: 0px;
  background: #000;
  border: 1px solid #333;
  border-radius: 5px;
  width: 90%;
  max-width: 850px;
  height: auto;
  max-height: 95%;
  overflow: hidden;
  position: relative;
  top: 50px;
  transition: all 0ms ease-in-out;
}
.rightpopupbox {
  display: inline-block;
  width: 49%;
  padding-top: 20px;
  padding-left: 5px;
  padding-right: 30px;
  max-height: 100%;
  overflow: auto;
  text-align: left;
  box-sizing: border-box;
}
/* right margin to make room for hover images ... see below */
.rightpopupbox H1 { padding-right: 70px; 
  color: #C2B5A3; 
	background: -webkit-linear-gradient(left top, #BFA786, #bbb, #BFA786, #aaa, #BFA786, #ccc, #BFA786, #bbb);
		/*Safari 5.1 to 6.0 */
 	background: -o-linear-gradient(bottom right, #BFA786, #999, #BFA786, #fFA786, #BFA786, #999, #BFA786, #fFA786);
 		 /* For Opera 11.1 to 12.0 */
  	background: -moz-linear-gradient(bottom right, #BFA786, #999, #BFA786, #fFA786, #BFA786, #999, #BFA786, #fFA786);
  		/* For Firefox 3.6 to 15 */
  	background: -linear-gradient(to bottom right, #BFA786, #999, #BFA786, #fFA786, #BFA786, #999, #BFA786, #fFA786);
  		/* Standard syntax */
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
}
.rightpopupbox .soldout { padding-right: 70px; color:#902020;}
/* .rightpopupbox:nth-child(2) { padding-right: 70px;} I think this is not effecting the 2nd child of rightpopupbox, but a popup box that is the 2nd child */
.leftpopupbox { text-align: left; float: left; display: inline-block; width: 51%;}
.leftpopupbox img {width: 100%; height: auto; padding: 5% 5% 5% 5%; box-sizing: border-box; border-radius: 35px;}


/* for cell phones */
/* for cell phones */

@media only screen and (max-width: 40em) {
	.cellhidden { display: none; }
	.cellonlyshow {display: inline; }
	
	.menueImage /*agl rulekind: base;*/ { display: inline-block; float: none; padding: 10px 0; width: 95%; max-width: 120px; } /* for small cell images of 2 rows ... changed from " width: 95%; max-width: 350px; " */ 
	.menueImage img { width: 80%; height: auto; max-height: 120px; } /* for small cell images of 2 rows ... chaged from " width: 80%; height: auto; max-height: 500px; " */
	.menueImage2 /*agl rulekind: base;*/ { display: inline-block; float: none; padding: 10px 0; width: 95%; max-width: 120px; } /* for small cell images of 2 rows ... changed from " width: 95%; max-width: 350px; " */ 
	.menueImage2 img { width: 80%; height: auto;  } /* for small cell images of 2 rows ... chaged from " width: 80%; height: auto; max-height: 500px; " */
	.menueImage3 /*agl rulekind: base;*/ { display: inline-block; float: none; padding: 10px 0; width: 95%; max-width: 190px; } /* for small cell images of 2 rows ... changed from " width: 95%; max-width: 350px; " */ 
	.menueImage3 img { width: 80%; height: auto;  } /* for small cell images of 2 rows ... chaged from " width: 80%; height: auto; max-height: 500px; " */


	.menueImage .ds263 { visibility: visible; color:#606060; } /* unhides text below pictures that hover usually reveil */
	.menueImage2 .ds263 { visibility: visible; color:#606060; } /* unhides text below pictures that hover usually reveil */
	.menueImage3 .ds263 { visibility: visible; color:#606060; } /* unhides text below pictures that hover usually reveil */



	form table { display: block; }  /* if added to paypal css it might conflict with any other forms that may be added later... might need to give a class */
	  .popup { width: 95%; top: 5px; margin: 0; padding-bottom: 10px; overflow: scroll; min-height: 0px} 
	  .popup .leftpopupbox { display: inline-block; width: 95%; } 
	  .popup .rightpopupbox { width: 90%; margin-left: 10%; margin-top: -10%} 
	  .overlay {
		  position: fixed;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  background: rgba(0, 0, 0, 0.4);
		  transition: opacity 500ms;
		  Display: none;
		  opacity: 0;
		}
		
	.menueImage /*agl rulekind: base;*/ { 
	display: inline-block; 
	float: none; 
	width:95%;
	padding: 5px 0px 7px 0px; 
	margin: 2px 0px;
	border: 1px solid #000;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
		   -webkit-transition:  border 0.6s steps(30);
		   -moz-transition: border 0.6s steps(30);
		   -o-transition: border 0.6s steps(30);
		   -ms-transition: border 0.6s steps(30);
		   transition: border 0.3s steps(36);
	}
	.menueImage img /*agl rulekind: base;*/ { 
	width: 100%;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
	}
	
	.menueImage2 /*agl rulekind: base;*/ { 
	display: inline-block; 
	float: none; 
	width:95%;
	padding: 5px 0px 7px 0px; 
	margin: 2px 0px;
	border: 1px solid #000;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
		   -webkit-transition:  border 0.6s steps(30);
		   -moz-transition: border 0.6s steps(30);
		   -o-transition: border 0.6s steps(30);
		   -ms-transition: border 0.6s steps(30);
		   transition: border 0.3s steps(36);
	}

	.menueImage3 img /*agl rulekind: base;*/ { 
	width: 100%;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
	}
	
	.menueImage3 /*agl rulekind: base;*/ { 
	display: inline-block; 
	float: none; 
	width:95%;
	padding: 5px 0px 7px 0px; 
	margin: 2px 0px;
	border: 1px solid #000;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
		   -webkit-transition:  border 0.6s steps(30);
		   -moz-transition: border 0.6s steps(30);
		   -o-transition: border 0.6s steps(30);
		   -ms-transition: border 0.6s steps(30);
		   transition: border 0.3s steps(36);
	}

	.menueImage3 img /*agl rulekind: base;*/ { 
	width: 100%;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
	}
	
	.rightpopupbox H1 { padding-right: 10px; font-size:28px;
	}

	.rightpopupbox:nth-child(2) { padding-right: 0px;}
		

}

/* disable to trouble shoot "select" on phones */

select, option {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;

   color: #666;
    font-size:11px;
    padding: 5px;
    margin: 5px;
    margin-left: 10px;
    background: transparent;
    width: 250px;
}