*{
	margin:0;
	padding:0;
}
body{
	background-image: url('2.jpg');
	background-attachment: fixed;
	background-size: cover;
}
.fa-angle-up,.fa-angle-down{
	position: absolute;
	left:50%;
	transform:translate(-50%,-50%);
	font-size: 3em;
	color: white;
	z-index: 40;
	opacity: 1;
	transition: all ease .5s;

}

.fa.hide{
	opacity: 0
}
.fa-angle-up{
	position: fixed;
	top:20%;
}
.fa-angle-down{
	position: fixed;
	top:80%;
}
.fa-angle-left,.fa-angle-right{
	display: none;
}


#fade{
	position: fixed;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	visibility: visible;
	z-index: 10;
	top: 0;
	left: 0;
	transition: all ease .5s;
	}
#fade.hide{
	visibility: hidden;
	background-color: rgba(0,0,0,0);
}


.thumbnails{
	background-color:white;
	display: flex;
	flex-wrap: wrap;
	width:21.5em;
	margin:2em auto;
	padding-top: .5em;
}

.thumbnails img{
	flex:0 0 20%;
	display: block;
	height: 10em;
	margin-left: .5em;
	margin-bottom: .5em;
}

.slide-container{
	display: flex;
}

.prev-img{
	position: fixed;
	width:0em;
	top:23%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity: 0;
	transition: all ease 1s;
	z-index: 30;
	background-color: white;
	transition: all ease 1s;

}
.prev-img.show{
	width: 10em;
	opacity: 1;
}
.prev-img>img{
	display: block;
	margin:auto;
	margin-top: .25em;
	margin-bottom:.25em;
	width: 95%;
	opacity: 0.75;
	transition: ease all .2s;
}
.prev-img>img:hover{
	opacity: 1;
}

.next-img{
	position: fixed;
	width:0em;
	top:77%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity: 0;
	transition: all ease 1s;
	z-index: 29;
	background-color: white;
	transition: all ease 1s;
}
.next-img.show{
	width: 10em;
	opacity: 1;
}
.next-img>img{
	display: block;
	margin:auto;
	margin-top: .25em;
	margin-bottom:.25em;
	width: 95%;
	opacity: 0.75;
	transition: ease all .2s;
}
.next-img>img:hover{
	opacity: 1;
}

.popup-container{
	position: fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width: 0;
	opacity: 0;
	transition: all ease .5s;
	z-index: 30;
	background-color: white;
	box-shadow: 0px 0px 100px 50px rgba(0,0,0,1);
}
.popup-container.show{
	width: 20em;
	opacity: 1;
	

}

.popup-container>img{
	display: block;
	margin:auto;
	margin-top: .25em;
	margin-bottom:.25em;
	width: 97.5%;
}

@media only screen and (min-width : 43.5em){
	.fa-angle-up,.fa-angle-down{
		display: none;
	}
	.fa-angle-left{
		display: block;
		position: absolute;
		top:13.3em;
		left:40%;
		transform:translate(-50%,-50%);
		font-size: 3em;
		color: white;
		z-index: 40;
		opacity: .5;
		transition: all ease .5s;
	}
	.fa-angle-right{
		display: block;
		position: absolute;
		top:13.3em;
		left:60%;
		transform:translate(-50%,-50%);
		font-size: 3em;
		color: white;
		z-index: 40;
		opacity: .5;
		transition: all ease 0.5s;
		
	}
	.fa-angle-left:hover{
		opacity: 1;
	}
	.fa-angle-right:hover{
		opacity: 1;
	}
	.thumbnails{
		background-color:white;
		display: flex;
		flex-wrap: wrap;
		width:42.5em;
		margin:5em auto;
		padding-top: .5em;
	}
	.prev-img{
		position: fixed;
		width: 0em;
		top:21em;
		left:18%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 1.5s;
		z-index: 30;
		background-color: white;
	}
	.prev-img.show{
		width: 12em;
		opacity: 1;
}
	.prev-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.next-img{
		position: fixed;
		width: 0em;
		top:21em;
		left:82%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 1.5s;
		z-index: 30;
		background-color: white;
	}
	.next-img.show{
		width: 12em;
		opacity: 1;
	}
	.next-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.popup-container{
		position: fixed;
		top:21em;
		left:50%;
		transform:translate(-50%,-50%);
		width: 0;
		opacity: 0;
		transition: all ease 1s;
		z-index: 30;
	}

	.popup-container.show{
		width: 25em;
		opacity: 1;
		z-index: 50;
	}

}
@media only screen and (min-width : 70em){
	.thumbnails{
		background-color:white;
		display: flex;
		flex-wrap: wrap;
		width:63.5em;
		margin:10em auto;
		padding-top: .5em;
	}

	.thumbnails img{
		flex:0 0 15%;
		display: block;
		height: 10em;
		margin-left: .5em;
		margin-bottom: .5em;
	}
	.prev-img{
		position: fixed;
		width: 0em;
		top:21em;
		left:20%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 2s;
		z-index: 30;
		background-color: white;
	}
	.prev-img.show{
		width: 15em;
		opacity: 1;
	}
	.prev-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.next-img{
		position: fixed;
		width: 0em;
		top:21em;
		left:80%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 2s;
		z-index: 30;
		background-color: white;
	}
	.next-img.show{
		width: 15em;
		opacity: 1;
	}
	.next-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.popup-container{
		position: fixed;
		top:21em;
		left:50%;
		transform:translate(-50%,-50%);
		width: 0;
		opacity: 0;
		transition: all ease 1s;
		z-index: 30;
	}

	.popup-container.show{
		width: 28em;
		opacity: 1;
	}

}