@charset "utf-8";
/* CSS Document */
:root{
    --background-color: #93BA36;
    --darker-background-color: #8fb953;
	--lighter-background-color: #e5f3de;
    --accent-color: #DF6F1D;
	--text-color: #5c5e5c;
}

#impressions {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--darker-background-color);
}

.gallery {
	width: 100%;
}

.gallery-container {
	align-items: center;
	display: flex;
	height: 20em;
	margin: 0 auto;
	max-width: 70%;
	position: relative;
}

.gallery-item {
	height: 10em;
	opacity: 0;
	position: absolute;
	left: 35%;
	transition: all 0.5s ease;
	width: 15em;
	z-index: 0;
	border-radius: 1.3em;
	background-size: contain;
	object-fit: cover;
	aspect-ratio: 3/4;
}

.gallery-item-1 {
	left: 1%;
	opacity: .4;
	transform: translateX(-50%);
	object-fit: cover;
}

.gallery-item-2, .gallery-item-4 {
	height: 14em;
	opacity: .8;
	width: 18em;
	z-index: 1;
}

.gallery-item-2 {
	left: 20%;
	transform: translateX(-50%);
	object-fit: cover;
}

.gallery-item-3 {
	box-shadow: 0 0 4em .3em rgba(0,0,0,0.35);
	height: 18em;
	opacity: 1;
	left: 50%;
	transform: translateX(-50%);
	width: 26em;
	z-index: 2;
	object-fit: cover;
}

.gallery-item-4 {
	left: 80%;
	transform: translateX(-50%);
	object-fit: cover;
}

.gallery-item-5 {
	left: 99%;
	opacity: .4;
	transform: translateX(-50%);
	z-index: 1;
	object-fit: cover;
}

.gallery-controls {
	display: flex;
	justify-content: center;
	margin: 2em 0;
	height: 5em;
}

.gallery-controls button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	margin: 0 2em;
	padding: 0 1em;
	text-transform: capitalize;
}

.gallery-controls-button:focus {
	outline: none;
}

.gallery-controls-previous {
	position: relative;
	color: var(--lighter-background-color);
}

.gallery-controls-previous::before {
	border: solid var(--lighter-background-color);
	border-width: 0 .25em .25em 0;
	content: '';
	display: inline-block;
	height: .3em;
	left: -2em;
	padding: .7em;
	position: absolute;
	top: -18%;
	transform: rotate(135deg) translateY(-50%);
	transition: left 0.15s ease-in-out;
	width: .3em;
}

.gallery-controls-previous:hover::before {
	left: -3em;
}

.gallery-controls-next {
	position: relative;
  	color: var(--lighter-background-color);
}

.gallery-controls-next::before {
	border: solid var(--lighter-background-color);
	border-width: 0 .25em .25em 0;
	content: '';
	display: inline-block;
	height: .3em;
	padding: .7em;
	position: absolute;
	right: -2em;
	top: 2.5%;
	transform: rotate(-45deg) translateY(-50%);
	transition: right 0.15s ease-in-out;
	width: .3em;
}

.gallery-controls-next:hover:before {
	right: -3em;
}

.gallery-nav {
	bottom: -1em;
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
	position: absolute;
	width: 100%;
}

.gallery-nav li {
	background: var(--lighter-background-color);
	border-radius: 50%;
	height: 1em;
	margin: 0 3em;
	width: 5em;
}

.gallery-nav li.gallery-item-selected {
	background: var(--lighter-background-color);
}
@media screen and (max-width: 950px){
.gallery {
	width: 100%;
}
.gallery-container {
	align-items: center;
	display: flex;
	height: 20em;
	margin: 0 auto;
	max-width: 70%;
	position: relative;
}
.gallery-item {
	height: 0em;
	opacity: 0;
	position: absolute;
	transition: all 0.5s ease;
	width: 0em;
	z-index: 0;
	border-radius: 1.3em;
	background-size: contain;
}
.gallery-item-1 {
	left: 50%;
	height: 17em;
	width: 26em;
	opacity: 0;
	transform: translateX(-50%);
}
.gallery-item-2 {
	left: 50%;
	height: 17em;
	width: 26em;
	opacity: 0;
	transform: translateX(-50%);
}
.gallery-item-3 {
	box-shadow: 0 0 4em .3em rgba(0,0,0,0.35);
	height: 17em;
	opacity: 1;
	left: 50%;
	transform: translateX(-50%);
	width: 26em;
	z-index: 2;
}
.gallery-item-4 {
	left: 50%;
	height: 17em;
	width: 26em;
	opacity: 0;
	transform: translateX(-50%);
}
.gallery-item-5 {
	left: 50%;
	height: 17em;
	width: 26em;
	opacity: 0;
	transform: translateX(-50%);
}
.gallery-controls {
	display: flex;
	justify-content: center;
	margin: 0.5em 0;
	height: 5em;
}
.gallery-controls button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	margin: 0 2em;
	padding: 0 1em;
	text-transform: capitalize;
}
.gallery-controls-button:focus {
	outline: none;
}
.gallery-controls-previous {
	position: relative;
}
.gallery-controls-previous::before {
	border: solid var(--lighter-background-color);
	border-width: 0 .25em .25em 0;
	content: '';
	display: inline-block;
	height: .3em;
	left: -2em;
	padding: .7em;
	position: absolute;
	top: -18%;
	transform: rotate(135deg) translateY(-50%);
	transition: left 0.15s ease-in-out;
	width: .3em;
}
.gallery-controls-previous:hover::before {
	left: -3em;
}
.gallery-controls-next {
	position: relative;
}
.gallery-controls-next::before {
	border: solid var(--lighter-background-color);
	border-width: 0 .25em .25em 0;
	content: '';
	display: inline-block;
	height: .3em;
	padding: .7em;
	position: absolute;
	right: -2em;
	top: 2.5%;
	transform: rotate(-45deg) translateY(-50%);
	transition: right 0.15s ease-in-out;
	width: .3em;
}
.gallery-controls-next:hover:before {
	right: -3em;
}
.gallery-nav {
	bottom: -1em;
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
	position: absolute;
	width: 100%;
}
.gallery-nav li {
	background: var(--lighter-background-color);
	border-radius: 50%;
	height: 1em;
	margin: 0 3em;
	width: 5em;
}
}
@media screen and (max-width: 700px){
.gallery {
	width: 100%;
}
.gallery-container {
	align-items: center;
	display: flex;
	height: 20em;
	margin: 0 auto;
	max-width: 70%;
	position: relative;
}
.gallery-item {
	height: 0em;
	opacity: 0;
	position: absolute;
	transition: all 0.5s ease;
	width: 0em;
	z-index: 0;
	border-radius: 1.3em;
	background-size: contain;
}
.gallery-item-1 {
	left: 50%;
	height: 13em;
	width: 20em;
	opacity: 0;
	transform: translateX(-50%);
}
.gallery-item-2 {
	left: 50%;
	height: 13em;
	width: 20em;
	transform: translateX(-50%);
	opacity: 0;
}
.gallery-item-3 {
	box-shadow: 0 0 4em .3em rgba(0,0,0,0.35);
	height: 13em;
	opacity: 1;
	left: 50%;
	transform: translateX(-50%);
	width: 20em;
	z-index: 2;
}
.gallery-item-4 {
	left: 50%;
	height: 13em;
	width: 20em;
	transform: translateX(-50%);
	opacity: 0;
}
.gallery-item-5 {
	left: 50%;
	height: 13em;
	width: 20em;
	opacity: 0;
	transform: translateX(-50%);
}
.gallery-controls {
	display: flex;
	justify-content: center;
	margin: 0.5em 0;
	height: 5em;
}
.gallery-controls button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	margin: 0 2em;
	padding: 0 1em;
	text-transform: capitalize;
}
.gallery-controls-button:focus {
	outline: none;
}
.gallery-controls-previous {
	position: relative;
}
.gallery-controls-previous::before {
	border: solid var(--lighter-background-color);
	border-width: 0 .25em .25em 0;
	content: '';
	display: inline-block;
	height: .3em;
	left: -2em;
	padding: .7em;
	position: absolute;
	top: -19%;
	transform: rotate(135deg) translateY(-50%);
	transition: left 0.15s ease-in-out;
	width: .3em;
}
.gallery-controls-previous:hover::before {
	left: -3em;
}
.gallery-controls-next {
	position: relative;
}
.gallery-controls-next::before {
	border: solid var(--lighter-background-color);
	border-width: 0 .25em .25em 0;
	content: '';
	display: inline-block;
	height: .3em;
	padding: .7em;
	position: absolute;
	right: -2em;
	top: 2%;
	transform: rotate(-45deg) translateY(-50%);
	transition: right 0.15s ease-in-out;
	width: .3em;
}
.gallery-controls-next:hover:before {
	right: -3em;
}
.gallery-nav {
	bottom: -1em;
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
	position: absolute;
	width: 100%;
}
.gallery-nav li {
	background: var(--lighter-background-color);
	border-radius: 50%;
	height: 1em;
	margin: 0 3em;
	width: 5em;
}
}