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

html {
	width: 100%;
}

body {
	font-family: 'Montserrat', sans-serif;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

p {
	font-weight: 400;
	font-size: 14px;
}

/* Scrollbar Styles */

body::-webkit-scrollbar              {
	background-color:#FFFFFF;
	width: 10px;
	height: 10px;
}

body::-webkit-scrollbar-button       {
	background-color: #ffffff;
}

body::-webkit-scrollbar-track        {
	background-color: #FFFFFF;
}

body::-webkit-scrollbar-track-piece  {
	background-color: #FFFFFF;
}

body::-webkit-scrollbar-thumb        {
	background-color: #4D4D4D;
	border-radius: 5px;
}

ul {
	list-style-type: none;
	padding-left: 19px;
	margin: 25px 25px 0px 0px;
	float: right;
	display: inline;
}

li {
	display: inline;
	padding-right: 20px;
}

a {
	text-decoration: none;
	color: #4d4d4d;
	font-weight:bold;
}

a:hover {
	color: #1d1d1d;
}

.logo {
	width: 35px;
	height: 35px;
	background-image: url(../images/mwlight.png);
	background-size: cover;
	margin: 15px 0px 0px 25px;
	float:left
}

.logo:hover {
	width: 35px;
	height: 35px;
	background-image: url(../images/mwdark.png);
	background-size: cover;
}

.navigation {
	position:fixed;
	top: 0px;
	height: 35px;
	width: 100%;
	margin-bottom: 30px;
	padding: 0px 0px 30px 0px;
	background-color:#FFFFFF;
	z-index: 20;
}

/* H1 is designated for page titles. */

h1 {
	font-weight: bold;
	font-size: 50px;
	color:#4D4D4D;
}

#title {
	width: 100%;
	text-align:center;
	margin: 96px auto 0px auto;
}

/*Home Page Navigation*/

#nav {
	width: 900px;
	margin: 80px auto;
	text-align:center;
	padding-bottom: 230px;
}

#illus {
	width: 200px;
	height: 200px;
	padding: 0px 0px 0px 0px;
	margin-right: 50px;
	float:left;
	background-image: url(../images/illuslight.png);
	background-repeat: no-repeat;
	background-size: 200px 200px;
}

#illus:hover {
	background-image: url(../images/illusdark.png);
}


#design {
	width: 200px;
	height: 200px;
	padding: 0px 0px;
	margin-left: 100px;
	margin-right: 150px;
	float:left;
	background-image: url(../images/designlight.png);
	background-repeat: no-repeat;
	background-size: 200px 200px;
}

#design:hover {
	background-image:url(../images/designdark.png);
}


#threed {
	width: 200px;
	height: 200px;
	padding: 0px 0px 0px 0px;
	margin-left: 0px;
	float:left;
	background-image: url(../images/threedlight.png);
	background-repeat: no-repeat;
	background-size: 200px 200px;
}

#threed:hover {
	background-image:url(../images/threeddark.png);
}

/*Home page nav out*/


.hovercontain {
	width: auto;
	height: 300px;
	float: left;
	margin: 5.25px 5px;
}

/* Margin-height must be a bit larger than margin-width to look right */
/* A height of 300 for each image. */

.image {
	float: left;
	height: 300px;
	text-align:center;
}


.footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 90px;
	text-align:right;
	background-color: #FFFFFF;
	margin-top: 75px;
	margin-bottom: 0px;
}

.footertwo {
	float: left;
	width: 100%;
	height: 90px;
	text-align: right;
	background-color: #FFFFFF;
	margin-top: 75px;
	margin-bottom: 0px;
}

.email {
	float: left;
	color: #4d4d4d;
	margin-top: 35px;
	margin-left: 25px;
}

.sm {
	float: right;
	text-align: right;
	margin: 0px;
	padding: 0px 25px;
	height: 25px;
	width: 25px;
	background-repeat: no-repeat;
	background-position: top;
	background-size: 25px 25px;
}

#tumblr {
	background-image: url(../images/TumblrLight.png);
}

#tumblr:hover {
	background-image:url(../images/TumblrDark.png);
}

#twitter {
	background-image: url(../images/TwitterLight.png);
}

#twitter:hover {
	background-image: url(../images/TwitterDark.png);
}

#instagram {
	background-image: url(../images/InstagramLight.png);
}

#instagram:hover {
	background-image: url(../images/InstagramDark.png);
}

#facebook {
	background-image: url(../images/FacebookLight.png);
}

#facebook:hover {
	background-image: url(../images/FacebookDark.png);
}

#deviantart {
	background-image: url(../images/DeviantartLight.png);
}

#deviantart:hover {
	background-image: url(../images/DeviantartDark.png);
}

#behance {
	background-image: url(../images/BehanceLight.png);
}

#behance:hover {
	background-image: url(../images/BehanceDark.png);
}

#artstation {
	background-image: url(../images/ArtstationLight.png);
}

#artstation:hover {
	background-image: url(../images/ArtstationDark.png);
}