/******************* newslider.css - 24/5/22 *******************/


	.slider-container {
	display: grid;
	grid-column: 1;
	text-align: center;
	overflow: hidden;
	justify-content: center;
	align-content: center;	
/*	height: auto;*/
	margin: 0 auto;
	}
	
	.slider-container.home {
	width: 210px;	
	height: 210px;
	margin: 1em 0 3em 0;
	}
		
	.slider-container.projects {
	width: 210px;	
	height: 210px;
	}
	
	.slider-container.wedding {
	width: 210px;	
	height: 210px;
	}
	
	.slides {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	}
	
	img {
	border: 2px solid #333;
	display: block;
	}
	
	.photoHome {
	max-width: 190px;
	max-height: 190px;
	}
	
	.photoProject {
	max-width: 190px;
	max-height: 190px;
	}
	
	.photoWedding {
	max-width: 190px;
	max-height: 190px;
	}
	
	.slides::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	}
            
	.slides::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 10px;
	}
	
	.slides::-webkit-scrollbar-track {
	background: transparent;
	}
	
	.slides > div {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 210px;
	height: auto;
	margin-right: 50px;
	display: flex;
	justify-self: center;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-bottom: 5px;
	}
	
	/**************** newslider media queries *****************/
	
/*********** smaller devices (landscape tablets, 480px and up) - yellow ***********/

@media only screen and (min-width:480px) {
	
	/* ********************** my Projects - 480 yellow *********************** */
	
.slider-container.projects {
width: 420px;	
height: 420px;
}

.photoProject {
max-width: 390px;
max-height: 390px;
}

.slides > div {
width: 420px;
}

/* ********************** weddings - 480 yellow *********************** */

.slider-container.wedding {
width: 420px;	
height: 420px;
}

.photoWedding {
max-width: 390px;
max-height: 390px;
}

.slides > div {
width: 420px;
}
}

/* Medium devices (landscape tablets, 768px and up) - green ***********/

@media only screen and (min-width: 768px) {

	/* ********************** my Projects - 768px and up-  green *********************** */

.slider-container.projects {
grid-column: 2;
grid-row: 1;
width: 550px;
height: 550px;
}
	
.photoProject {
max-width: 495px;
max-height: 495px;
}

.slides > div {
width: 550px;
}

/* ********************** weddings - 768px and up - green *********************** */

.slider-container.wedding {
width: 550px;	
height: 550px;
}

.photoWedding {
max-width: 495px;
max-height: 495px;
}

.slides > div {
width: 550px;
}
}

/*********** Extra large devices (large laptops and desktops, 1400px and up) - blue ***********/

@media only screen and (min-width: 1400px) {

	/* ********************** my Projects - 1400px and up-  blue *********************** */

.slider-container.projects {
width: 750px;	
height: 750px;
}

.photoProject {
max-width: 720px;
max-height: 720px;
}

.slides > div {
width: 750px;
}

/* ********************** weddings - 1400px and up - blue *********************** */

.slider-container.wedding {
width: 750px;	
height: 750px;
}

.photoWedding {
max-width: 720px;
max-height: 720px;
}

.slides > div {
width: 750px;
}
}
      
    /****************** end *****************
    
    /******* 1 - make .slide-container.?? and slide > div same width and height ********/
    /******* 2 - make .photo?? slightly smaller to allow border to show **********/