@-webkit-keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	stop;
}
@keyframes fadeIn {
	from { opacity: 0; }
 	to { opacity: 1; }
 	stop;
}
@-webkit-keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
	stop;
}
@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
	stop;
}

html, body {
	margin: 0;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

.wrapper {
	position: relative;
	display: flex;
	justify-content: center;
}

img {
	position: absolute;
}

.images {
	animation: fadeIn 1s; 
}

.hidenimg {
	z-index: 10;
	display: none;
}

.content {
	min-height: 100%;
}

#mobile {
	display: none;
	animation: fadeOut 1s;
	opacity: 0;
}

.container {
	margin-top: 90%;
	display: none;
	width: 75%;
	height: auto;
	z-index: 100;
	font-family: 'Be Vietnam', sans-serif;
	font-size: 100%;
}

.container div a {
	width: 100%;
	background-color: #ae7b58;
	color: white;
}

.container_elements {
	margin: 20px;
	display: flex;
	word-break: break-all;
}

.inner_container {
	width: 100%;
	height: auto;
	background-color: #ae7b58;
	margin-left: 40px;
}

.inner_container:hover {
	background-color: #616c6b;
	cursor: pointer;
}

.inner_container img {
	width: inherit;
	height: auto;
	position: relative;
}

.inner_container:nth-child(odd) {
	margin-left: 0;
}

#last_image {
	margin-left: 0;
	width: 100%;
	margin-top: -36px;
}

@media only screen and (max-width: 1000px) {
	.container {
		display: flex;
		flex-direction: column;
		position: absolute;
	}
	.container_elements:last-of-type a div{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0;
	}
	.container_elements:last-of-type a:nth-child(odd) div p{
		margin-right: 50px;
		margin-left: 50px;
		margin-bottom: 40px;
		margin-top: 40px;
	}
	.images {
		display: none;
	}
	#mobile {
		display: block;
		width: 100%;
		-webkit-animation: fadeIn 1s;
    	animation: fadeIn 1s;
    	opacity: 1;
    	z-index: 50;
	}
	.hidenimg {
		display: none;
	}
}