/* Position the image container (needed to position the left and right arrows) */
.certifications-gallery {
	border: 20px outset hsl(158, 19%, 47%); /*#5E5E5E;*/
  	position: relative;
  	display: flex;
  	flex-flow:column nowrap;
  	align-items: center;
  	justify-content: center;
    margin: 0 auto;
    width: 100%;
	max-width: 560px;
}

/* figure | flex-item */
#card_with_certification {
	width: 100%;
	aspect-ratio: 7 / 5;
    border: 10px inset hsl(158, 19%, 47%);
	margin: 0; /* cancel propertie of [class^="small-article"] figure:not(.app) */
}

/* Selects every <img> element that are direct children of a <figure> element */
#card_with_certification > img {
	max-width: 500px;
	aspect-ratio: 7 / 5;
	background-color: #f5f6f8;
}

#issuedDate {
	padding: 0 0 0 10px;
}


/* 	The trick to make the navbar scrollable is by using overflow:auto and white-space: nowrap. */
/*	mandatory: 	Scroll will automatically move to snap point after scroll action is finished. */
/*	To control scroll snap stop behaviour, 
	the scroll-snap-stop and scroll-snap-align properties must be set on the child elements,
	and the scroll-snap-type property must be set on the parent element.*/
.thumbnail-bar {
	width: 100%;
 	display: flex;
 	flex-flow: row nowrap;
 	justify-content: space-between;
 	align-items: center;
	overflow-x: auto;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
	padding: 12px 5px;
	border-top: 6px groove hsl(127, 33%, 76%);
	background-color: hsl(161, 34%, 66%);
	background-origin: border-box;
	background-clip: padding-box;	
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

.stylingBtn {
	width: 50%;
	background-color: hsl(161, 34%, 66%);
	border: 5px solid transparent; /*#AD4C02;*/
	opacity: .8;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	margin-bottom: 6px;
}

.stylingBtn:hover {
	opacity: 1;
	border: 5px solid hsl(161, 33%, 20%);
}


.thumbnail-bar img {
	width: 100px;
}

.responsive {
	display: block;
    width: 100%;
    margin-inline: auto;
    object-fit: cover;
}

#next-previous-controls {
	display: none;
}

/*  iPads, Tablets */
@media screen and (max-width: 600px) {
	.certifications-gallery {
        border: none;
        box-shadow: none;
        padding: 0 1rem;
    }

	#card_with_certification {
		border: 20px inset hsl(96, 14%, 54%);
	}

	.thumbnail-bar {
		display: none;
	}

	/*
	.thumbnail-bar {
		padding: 5px;
		border-top: 10px solid hsl(96, 14%, 40%);
		background-color: hsl(96, 14%, 54%);
	}

	.stylingBtn {
		background-color: hsl(96, 14%, 54%);
	}
	*/

	/* Now the scroll bar doesn't work, the appearance of the buttons is a dot. *//*
	.thumbnail-bar img {
		width: 100%;
	}
	*/

	#next-previous-controls {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		/*border-top: 10px solid hsl(0, 0%, 37%);*/
		background-color:  hsl(161, 33%, 20%);
	}

	.controls {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: hsla(27, 33%, 92%, 0.5);
		border: 1px solid whitesmoke;
		background-origin: border-box;
		-webkit-background-origin: border-box;
		background-clip: padding-box;
		-webkit-background-clip: padding-box;
	}

	.controls:hover {
		background-color: hsla(26, 98%, 34%,0.5);
	}

	.arrow-control {
		display: block;
		font-size: 40px;
		color: beige;
		margin: 0 0 1px 0;
	}
	
}