#modal-window{
	z-index: 20000;
	left:0;
	top:0;
	position: fixed;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	display: none;
}

#modal-window-container{
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: row;
}

#modal-window-image{
	overflow: hidden;
	width: 50%;
	height:100vh;
	transform: translateY(-100vh);
	animation: open-down 0.4s ease 0.1s both;
}
#modal-window-image img{
	display:block;
	margin:auto;
	height:100%;
	width:auto;
	position:relative;
	transform:translateX(-50%) translateY(-50%);
	top:50%;
	left:50%;

}
#modal-window-content{
	width: 50%;
	display: flex;
	color:white;
	flex-direction: column;
	background-color: #45B1C7;
	transform: translateY(100vh);
	animation: open-up 0.3s ease 0.1s both;
	overflow-y:scroll;
}
#modal-window-article{
	display:flex;
	flex-direction:column;
	height: 50vh;
	margin-left:60px;
}
#modal-window-slideshow{
	display:flex;
	margin-left:60px;
	overflow-y:scroll;
}
#modal-window-slideshow > ul > li > ul{
	flex-wrap: wrap;
	list-style: none;
	max-height: 50vh;
	display: flex;
}

#modal-window-slideshow > ul > li > ul > li > img{
	width: 120px;
	height: 100px;

}
#modal-window-article p{
	font-size:20px;
	margin-top: 60px;
	display:flex;
	height:400px;
	padding-bottom:60px;
	width:80%;
	overflow-y:scroll;
}
#modal-window-article h2{
	font-weight:200;
	margin-top:60px;
}

#modal-window-close{
	position: absolute;
	left:40vw;
	top:80vh;
	width:100px;
	height:100px;
	text-align: center;
	font-size:24px;
	color:white;
	background-color:none;
	border:3px solid white;
	color:black;
	border-radius:300px;
	color:white;
	transition:all .3s;
}
#modal-window-close:hover{
	background-color:white;
	color:#006581;
	cursor:pointer;
transition:all .3s;
}

@keyframes open-up {
	from{
		transform: translateX(-1vw) translateY(-100vh);
	}
	to{
		transform: translateX(0) translateY(0);
	}
}
@keyframes open-down {
	from{
		transform: translateX(1vw) translateY(100vh);
	}
	to{
		transform: translateX(0) translateY(0);
	}
}


@media screen and (max-width: 480px){
	#modal-window-container{
		flex-direction: column;
	}
	#modal-window-image{
		width: 100vw;
	}
	#modal-window-content{
		width: 100vw;
	}
	#modal-window-close{
		top: -35vh;
		left: 80vw;
	}
}
#modal-window-article
