/*  Add photos in groups of 12 (12, 24, 36, 48, 60) possible).
/* LARGE FORMAT on left side of page in large format, each photo 150x150px 3 across down to 2 across  108x108 px.   Mouseover photo opens same image as LARGE IMAGE touching original photo, and now with a caption */
/* In mid format photos are AT BOTTOM of page, above footer, and start at 4 rows, 210x210 down to 4 across 157x157. Mouseover photo opens same image as LARGE IMAGE touching original photo, and now with a caption */
/* On SMALL Screen (phone size) images at BOTTOM of page, starts at 
*/
.maxWidthPhotos {
	max-width: 1259px;
	margin: auto;
	clear:both;
}
.photoSeries {   /* sets up the container for the thumbnails */
	position: relative;
	margin: auto;
	margin-top: 10px;

	}

.photoTool {
/* This is the popup image with caption */

  position:relative;
    border: 1px dotted black;
	width:10%;   /* allows 8 images per row*/
	padding: 5px;
	float: left;
}

.photoTool img {
		max-width: 100%;
		height: auto;
		padding: 0px;
	}
.photoTool .photoTooltext {
    visibility: hidden;
    width: 270%;
	max-width: 400px;
    background-color:darkslategrey;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
 /*  positioning handled by positionImgN  */
    
    opacity: 0;
    transition: opacity 1s;
	font-size: 14px;

}






.photoTooltext {
	padding:10px;
}



.photoTooltext span {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	display: block;
}
.photoTool:hover .photoTooltext {
    visibility: visible;
    opacity: 1;
	position:absolute;
}

.photoToolItin {
/* This is the popup image with caption */
	position: relative;
    display: inline-block;
    border: none;
	width:20%;   
	padding: 5px;
	padding-right:15px;
	float: left;

}

.photoToolItin img {
		max-width: 100%;
		height: auto;
		padding: 0px;
	}

.positionItin {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom:-110px;
    left: -50px;
}
.centerPhoto {
    position: relative;
    bnorder: none;
	width:16%;
	height:148px;
	float:left;
}

.centerPhoto img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 .positionImg2, .positionImg3, .positionImg4, .positionImg5, .positionImg6, .positionImg7, .positionImg8,  .positionImg9,  .positionImg10  {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    height: auto;
    
    left: -50%;
    bottom:120px;
}

.positionImg1 {
    position: relative;
    z-index: 1;
    height: auto;

	left:-15%;
	bottom:120px;
}

.positionImg10 {
   position: relative;
    z-index: 1;
    height: auto;

	left:-145%;
	bottom:120px;
}



 .positionImg11,  .positionImg12,  .positionImg13,  .positionImg14,  .positionImg15,  .positionImg16, .positionImg17,  .positionImg18,  .positionImg19,  .positionImg20
 {
     /* Position the tooltip */
    position: absolute;
    z-index: 1;
    height: auto;

    left: -50%;
    bottom:240px;

 }
 
 .positionImg11 {
    position: relative;
    z-index: 1;
    height: auto;

	left:-15%;
	bottom:240px;
}
/*  fix the first and last in the row (item 1 and item 10) so they don't get cut off  */


.positionImg3x {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: -110px;
    left: -220%;
}

.positionImg4x {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: -110px;
    left: -320%;
}

.positionImg5x {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: -110px;
    left: -120%;
}

.positionImg6x {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 110px;
    left: -500%;
}
.positionImg7x {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 110px;
    left: -600%;
}
.positionImg8x {
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 110px;
    left: -700%;
}
.positionLeft {
    /* Position the tooltip */
    position: relative;
    z-index: 1;
    top: -35px;
    left: 5px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}



p.centered {
	text-align: center;
}