.outer-box{
	margin-top:-125px;
	margin-left:-15px;
	position: relative;
	padding: 0;
	width: 100vw;
	height: 50vh;
}
.art-container-1{
	background-image: url('../img/DKT2/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-2{
	background-image: url('../img/CPE/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-3{
	background-image: url('../img/FD/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-4{
	background-image: url('../img/MAPUA/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-5{
	background-image: url('../img/HW/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-6{
	background-image: url('../img/FR/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-7{
	background-image: url('../img/YE/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-container-8{
	background-image: url('../img/VD/header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.art-outer-box{
	width: 100vw;
	display: block;
	position: fixed;
	height: auto;
	padding: 15px;
}
.art-box{
	width: 60vw;
	margin:-150px auto 15px auto;
	position: relative;
	background:rgba(255, 255, 255, 0.85);
	border-radius: .25em;
	padding:50px 0;
}
.art-header{
	font-size: 50px;
	font-family: 'Syne', sans-serif;
	text-align: center;
	text-shadow: 1px 1px 3px #666;
}
.author{
	letter-spacing: .1em;
	text-align: center;
	margin-bottom: 100px;
	font-style: italic; 
}
.art-content{
	width: 75%;
	margin: 3% auto;
	text-align: justify;
}
.gallery-container{
	width: 75%;
	height: 500px;
	margin:2% auto;
	overflow-y: auto;
}
.modal.show .modal-dialog{
	margin-top:10%;
}
.imagepreview{
	width: 100%;
}
.share-link{
	width: 45vw;
	margin: 2% auto; 
}
.share{
	font-size: 20px;
	font-family: 'Syne', sans-serif;
}
.link-container{
	width:75px;
	line-height: 0;
	float: left;
}
/*MEDIA QUERY*/
@media only screen and (max-width: 1600px){
	.art-box{
		margin: -170px auto 15px auto;
	}
}
@media only screen and (max-width: 1440px){
	.art-box{
		margin: -195px auto 15px auto;
	}
	.art-header{
		font-size: 45px;
	}
}
@media only screen and (max-width: 1366px){
	.art-box{
		margin: -150px auto 15px auto;
	}
}
@media only screen and (max-width: 1280px){
	.art-box{
		margin: -315px auto 15px auto;
	}
	.art-header{
		font-size: 40px;
	}
}
@media only screen and (max-width: 1024px){
	.art-box{
		margin: -205px auto 15px auto; 
	}
}
@media only screen and (max-width: 768px){
	.art-box{
		width: 85vw;
		margin:-375px auto 15px auto;
	}
	.art-header{
		font-size: 30px;
	}
	.art-content, .gallery-container{
		width: 85%;
	}
	.img-thumbnail{
		width: 100%;
	}
	.share-link{
		width: 75vw;
		margin:0 auto 10% auto;
	}
}
@media only screen and (max-width: 720px){
	.art-box{
		margin: -510px auto 15px auto;
	}
}
@media only screen and (max-width: 480px){
	.art-box{
		margin: -290px auto 0 auto;
	}
	.art-header{
		font-size: 25px;
	}
	.art-content{
		font-size: 13px;
	}
}
@media only screen and (max-width: 414px){
	.art-box{
		margin: -270px auto 0 auto;
	}
}
@media only screen and (max-width: 375px){
	.art-box{
		margin: -245px auto 0 auto;
	}
	.art-header{
		font-size: 20px;
	}
}
@media only screen and (max-width: 360px){
	.art-box{
		margin: -230px auto 0 auto;
	}
}
@media only screen and (max-width: 320px){
	.art-box{
		margin: -200px auto 0 auto;
	}
}