@charset "UTF-8";
/* CSS Document */

body {
	overflow-x:hidden;
}

header {
	width:90vw;
	height:42vw;
	margin:auto;
	margin-top:4.5vw;
}

#logo {
	width:42vw;
	height:44vw;
	text-align:center;
	float:left;
	border:0.8vw #831773 solid;
}
#logo img {
	width:42vw;
	margin-top:-1vw;
	margin-bottom:-8vw;
}
#logo h1 {
	font-family:signika;
	font-weight:300;
	font-size:4vw;
	color:#831773;
}

#title {
	float:right;
	margin-left:-0.8vw;
	width:47vw;
	height:20vw;
	text-align:center;
	background-image:url("../images/border.png");
	background-size:14px 14px;
	background-position:top center;
}
#title h2 {
	font-family:fantasque;
	font-weight:200;
	font-size:4vw;
	line-height:1.5;
	background-color:white;
	padding:3.5vw;
	margin:3.5vw;
	color:#444444;
}

nav {
	margin-left:-5px;
	width:46vw;
	height:24.7vw;
	float:right;
	border:#831773 solid;
	border-width:0.4vw 0.5vw 0.5vw 0vw;
}

nav #links {
	width:36vw;
	height:13vw;
	text-align:center;
	line-height:1.5;
	margin:auto;
	margin-top:4vw;
	padding-top:3vw;
	padding-right:0.4vw;
	border:2px #831773 dashed;
}
nav #links a {
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:3.2vw;
	text-decoration:none;
	background-image: linear-gradient(white 50%, #831773 50%);
	background-size: 0% 0.18em;
    background-position-y: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in;
}
nav #links a:hover {
	background-size: 100% 0.18em;
}
nav #links p {
	color:#831773;
	font-family:fantasque;
	font-weight:400;
	font-size:3.2vw;
	margin:0px;
}

#container {
	width:75vw;
	margin:auto;
	margin-top:60px;
	margin-bottom:100px;
}

#large-image-box {
	width:52vw;
	height:490px;
	text-align:center;
	float:left;
	margin-bottom:6px;
}
#large-image-box img {
	width:48vw;
	margin-top:50px;
	cursor:pointer;
}
#large-image-box p {
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:12pt;
	cursor:pointer;
	margin-top:4px;
}

#images {
	width:22vw;
	height:490px;
	float:right;
	cursor:default;
}
#images img {
	height:95px;
	padding:7px 0px 7px 0px;
	cursor:pointer;
	display:block;
	margin:auto;
}

#desc {
	width:68vw;
	color:#444444;
	font-family:fantasque;
	font-weight:200;
	font-size:12pt;
	line-height:15pt;
	min-height:140px;
	padding:4vw 3vw 3vw 4vw;
	border-top:#831773 2px dashed;
	border-left:#831773 2px dashed;
	clear:both;
}
#desc #work-title {
	color:#831773;
	font-family:signika;
	font-size:15.8pt;
	margin-right:-2px;
	line-height:12pt;
}
#desc a {
	color:#831773;
}

#large-image-modal {
	display:none;
	position:fixed;
	width:100vw;
	height:100vh;
	left:0;
	top:0;
	background-color:rgba(69, 69, 69, 0.9);
}
#modal-content {
	width:70vw;
	background-color:white;
	margin:auto;
	margin-top:7vh;
	text-align:center;
}
#modal-content img {
	width:66vw;
	padding:2vw;
}
#modal-content p {
	color:#831773;
	font-family:fantasque;
	font-weight:200;
	font-size:12pt;
	cursor:pointer;
	width:50px;
	margin:auto;
	margin-top:-17px;
	padding:5px;
}

footer {
	width:407px;
	height:190px;
	margin:auto;
	margin-bottom:20px;
}
footer #image {
	width:407px;
	height:150px;
	background-image:url("../images/bg.png");
	background-size:128px 101px;
	background-position:bottom center;
	background-attachment:fixed;
	margin-bottom:-20px;
}
footer #description {
	width:407px;
	height:40px;
	background-color:#831773;
	text-align:center;
	line-height:40px;
}
footer #description p {
	color:white;
	font-family:signika;
	font-weight:200;
	font-size:12pt;
}