.title  { 	box-sizing: border-box;
					text-align: center;
					font-family: sans serif, tahoma;
					font-size: 24pt; font-weight: 600;
					padding: 10px 0; 
					}

/* Galleries pop-up horizontal menu */
.visible { display: none; }
.yellowblu:hover .visible { display: inline; font-size: 14pt; font-weight: 600;}
.visible a { padding: 0 10px; }					
					
.orablue 	{ background-color: #cbe9f5; color: #f16123; text-align: center; padding: 5px 0; }
.orayellow {	background-color: #f95120; color: yellow; text-align: center; padding: 5px 0; }
.bluyellow {	background-color: #fdf2b4; color: #185e9a; text-align: center; padding: 5px 0; }
.yellowblu {	background-color: #fcce54; color: #185e9a; 
						font-size: 18pt; font-weight: 600;
						padding-left: 3%;
						}
.whiteblu {	background-color: #185e9a; color: white; text-align: center; padding: 5px 0; }

img, img:hover { width: 100%; height:auto; border-radius: 8px; }


#ph-grp1 { margin: auto; padding: 5px; align-items: center; vertical-align: middle;
							}

.button1 { border-radius: 10px; padding: 30px 30px; border: 15px;
							background-color: #ffffcc;  
							font-size: 2em;
							text-align: center;
							font-family: Helvetica, Palatino Linotype, Arial Black;
							vertical-align: middle;
						
							}

#ph-grp2 { margin: auto; padding: 5px; align-items: center; vertical-align: middle;
							}
							
.button2 { border-radius: 10px; padding: 30px 30px; 
							background-color: white; 
							font-size: 2em;
							text-align: center;
							font-family: Helvetica, Palatino Linotype, Arial Black;
							vertical-align: middle;
							}



#photo-container 	{	display: flex; flex-direction: row; flex-wrap: wrap; 
										justify-content: space-between; 
										background-color: #cbe9f5; padding-top: 1%; 
										}
										
.photo-cell { padding: 2px; }


#spacer { padding-top: 115px ; padding-bottom: 15px; }

/*   ########   Small Media   ##########  */
@media (min-width: 200px) and (max-width: 650px) {
	
.photo-cell { width: 99%; margin: auto; }

/* slideshow description position */
.desc {  position: absolute; 
				z-index: 1;
				top: 135px;
				left: 175px; 
			}

			
#photo-buttn-wrap { display: block; opacity: 0.8; background: url('../images/glass+purple-effects.jpg'); }
.button1 , .button2  {	padding: 24px; font-size: 1.5em; 
															transition: padding 3s, transform 4s;}
#ph-grp1, #ph-grp2  { 	width: 30%; padding: 10px 0; 
											display: flex; flex-direction: column; box-sizing: border-box;
										}

.button1:hover, .button2:hover	{	
										padding: 20px; 
										transform: rotate(-360deg); 
										font-family: sans-serif;
										}

}

/*   ########   Medium Screens   ##########  */
@media (min-width: 650px) and (max-width: 800px) {
	
.photo-cell { width: 49%; margin: auto; }

/* slideshow description position */
.desc {  position: absolute; 
				z-index: 1;
				top: 135px;
				left: 255px; 
			}

	
#photo-buttn-wrap { display: block; opacity: 0.6; 
										position: absolute; left: 1%; top: 300px; 
									} 
	.button1 { width: 75%; }
	.button2 { width: 75%; }								
	
	#ph-grp1 { 	position: relative; 
								top: -80px; left: 17%; right: 17%;						
							}

	#ph-grp2 { 	position: relative; 
								top:-20px;; left: 17%; right: 17%;
							}
	
	
}

/*   ########   Large Screens   ##########  */
@media (min-width: 800px) {
	
	.photo-cell { width: 32%; margin: auto; }
	
	#photo-buttn-wrap { display: none; }
	
/* slideshow description position */
	.desc {  position: absolute; 
					z-index: 1;
					top: 135px;
					left: 300px; 
				}
}