.photoRadioMain {
	/* box-sizing: border-box; */
	display: flex;
	justify-content: center;
	align-items: left;
	flex-wrap: nowrap;
	margin-left: 0px;
	margin-right: auto;
	/* background-color: rgb(255, 218, 144); */
	width: auto;
	height: 80vh;
}

/* items with exposing buttons */

.PRtext {
	align-items: stretch;
	display: flex;
	flex-direction: row;
	justify-content: center;
	box-sizing: content-box;
	flex-grow: 1.5;
	flex-shrink: 1;
	flex-basis: 300px;
	/* 	margin: 10px; */
	/* 	float: left; */
	display: block;
}

.PRtitleCopy, a#photoRadioV2D {
	font-weight: 400;
	text-decoration: none;
	color: #222222;
}

a#photoRadioV2D .descriptionCopy:hover {
	text-decoration: none;
	cursor: pointer;
}

input[type="radio"] {
	appearance: none;
	background: #6FB0C7;
	border: 4px solid transparent;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	margin-right: 10px;
	padding: 5px;
	vertical-align: text-bottom;
}

input[type="radio"]:hover, input[type="radio"]:checked {
	background-color: transparent;
	border: 4px solid #6FB0C7;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	margin-right: 10px;
	cursor: pointer;
}

input[type="radio"]:hover + .PRtitleCopy, input[type="radio"]:checked + .PRtitleCopy, .PRtitleCopy:hover, .PRtitleCopy:checked {
	font-weight: 600;
}

.radio, .PRtitleCopy {
	display: inline-block;
	margin-bottom: 10px;
	vertical-align: top;
}

.PRitem {
	margin-top: 15px;
	display: block;
	margin-bottom: 15px;
	align-items: left;
	padding-left: 30px;
}

label, a#photoRadioV2D {
	padding-top: 3px;
	vertical-align: text-bottom;
	display: inline;
}

/* image grid exposure */
.PRimageGrid {
	width: 30vw;
	height: 70vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	border-radius: 10px;
	object-fit: cover;
	object-position: bottom;
	/* 	background-color: #005470; */
	flex-grow: 1;
	flex-shrink: 2;
	margin: 10px;
	overflow: hidden;
	/* 	flex: 2; */
}

.PRsingleImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	grid-column: 1/2;
	grid-row: 1/2;
	transition: opacity 0.5s ease;
}


#image01, #image02, #image03, #image04, #image05, #image06, #image07, #image08, #image09, #image10 {
	object-fit: cover;
}


/* CSS styles for hover effect */
.PRtext a#photoRadioV2D .PRitem:hover label, .PRtext a#photoRadioV2D .PRitem:checked label,
.PRtext .PRitem:hover input[name="serviceChoice"], .PRtext .PRitem:checked input[name="serviceChoice"] {
	font-weight: 600;
	color: #6FB0C7;
	cursor: pointer;
}

.PRtext .PRitem:hover input[type="radio"], .PRtext .PRitem:checked input[type="radio"] {
	background-color: transparent;
	border: 4px solid #6FB0C7;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	margin-right: 10px;
	cursor: pointer;
}

.descriptionCopy {
	margin-left: 40px;
	margin-right: 40px;
	font-size: 0em;
	display: block;
	height 0;
	opacity: 0;
	transition: opacity 0.5s ease-in-out, height 1s ease-out, font-size 0.2s ease-out;
}

.PRtext .PRitem:hover .descriptionCopy, .PRtext .PRitem:checked .descriptionCopy,
.PRtext .PRitem input[name="serviceChoice"]:hover ~ .descriptionCopy, .PRtext .PRitem input[name="serviceChoice"]:checked ~ .descriptionCopy {
	font-size: 0.9em;
	display: block;
	opacity: 1;
	height: auto;
	transition: opacity 0.5s ease-in-out, height 1s ease-out, font-size 0.3s ease-out;
}



@media screen and (max-width: 992px) {
	input[type="radio"] {
		/* Line below is my attempt to skirt safari radio button issues on ipad	 */
		-webkit-appearance: radio;
		appearance: none !important;
		background: #6FB0C7;
		border: 4px solid transparent;
		height: 20px;
		width: 20px;
		border-radius: 10px;
		margin-right: 10px;
		padding: 5px;
		vertical-align: text-bottom;
	}

	input[type="radio"]:hover, input[type="radio"]:checked {
		background-color: #f5f5f5;
		border: 4px solid #6FB0C7;
		height: 20px;
		width: 20px;
		border-radius: 10px;
		margin-right: 10px;
		cursor: pointer;
	}
/* below code is trying to solve the occassional image not covering background on ipad and some laptops */
.PRsingleImage {
	width: auto;
	object-fit: cover !important;
	object-position: center;
	grid-column: 1/2;
	grid-row: 1/2;
	transition: opacity 0.5s ease;
}
}