/* Font Importing */

/* Roboto Mono 300 400 500 700 */
/*@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap');*/

/* Open Sans 400 */
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');*/

/* Montserrat 400 500 600 700 800 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap');

/* Didact Gothic 400 */
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic&display=swap');

body {
	color: #575757; /* Dark Gray */
}

h1, h2, h3, h4, h5, h8 {
	font-family: "Montserrat";
	color: #000000;
}

h1 {
	font-size: 35px;
	font-weight: 700;
}

.big_title{
	font-size:35px;
	font_weight:700;
}

.small_title{
	display: none;
	font-size:35px;
	font_weigt:700;
}

h2{
	font-size:20px;
}

h3{
	font-size: 28px;
	font-weight: 600;
}

h4{
	font-weight: 600;
}

h5 {
	font-size: 24px;
	font-weight: 500;
}

h6{
	font-size: 12px;
	font-family: "Montserrat";
	font-weight: 600;
	font-style: italic;
	color: #000000;
}

h7{
	font-size: 12px;
	font-family: "Didact Gothic";
	color: #A2A2A2
}

h8{
	font-size: 28px;
	font-weight: 600;
}

p {
	font-size: 12px;
	font-family: "Montserrat";
	font-weight: 500;
	color:#727272;
	line-height: 2;
}

/*p {
	font-size: 13px;
	font-family: "Didact Gothic";
	color:#464646;
	line-height: 2;
}*/

img{
	width: 100%;
	height: 100%;
}

/* Start <div */

.canvas {
	padding-top: 5%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 5%;
	justify-content: center;
}


/* Header */

.headercontainer{
	padding-left: 8px;
	padding-right: 8px;
}

.headername {
	display: flex;
	justify-content: space-between;
}

.headerlinks {
	display: flex;
	justify-content: flex-end;
}


.headerabout{
	display: flex;
	margin-left: 20px;
	margin-top: 10px;
	color: #979797;
	
}

.headerwork{
	display: flex;
	margin-left: 20px;
	margin-top: 10px;
}
a {
	color: #000000;
	text-decoration: none;
	-webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
	transition: color 0s;
}
a:hover { /*link hover*/
	color: #A1A1A1;
}
.activelink {
	color:#5E5E5E;
}
.inactivelink {
	color:#000000;
}


/* Content */
.content{
	display: flex;
	justify-content: space-around;
	padding-top: 50px;
	align-items: center;
	flex-wrap: wrap;
}

/* Project Box Setup */
.row {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

/* Individual Floating boxes */
.column {
	flex: 33%;
	max-width: 33.33333%;
	justify-content: center;
}

.borderbox{
	width: auto;
	padding-top: 20px;
	padding-right: 20px;
	justify-content: center;
	align-items: center;
	transform: translateX(3%);
}

.column img {
	vertical-align: middle;
	width: 100%;
}

.imgcontainer{
	position: relative;
	opacity: 0;
}

.textcontainer{
	position: absolute;
	text-align: center;
	justify-content: center;
	height: 50%;
	width: 100%;
	margin-top: 45%;
	z-index: -1;
}


/*Load Animation Code*/

@keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.main_project4{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay: .45s;
	
}

.main_project3{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:.5s;
}

.main_project2{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:.55s;
}

.main_project1{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:.6s;
}

.main_project5{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:.65s;
}

.main_project6{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:.7s;
}

.main_project7{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:0.75s;
}

.main_project8{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:0.8s;
}

.main_project9{
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay:0.85s;
}


/* Hover Animation*/

.projectimg {
	transition: all .1s ease-in-out;
}
.projectimgoverlay {
	position: absolute;
	transition: all .1s ease-in-out;
}
.projectimgoverlay:hover {
	opacity: 0;
	position: absolute;
	transition: all .1s ease-in-out;
}
.projectimg:hover {
	opacity: 0.20;
	transition: all .1s ease-in-out;
}


/* Footer */

.footercontainer{
	display: flex;
	width: 100%;
	justify-content: center;
	padding-top: 40px;
	padding-bottom: 50px;
	opacity: 0;
}

.footercontainer{ /* Animation */
	animation-name: fadeIn;
	animation-duration: .15s;
	animation-fill-mode: forwards;
	animation-delay: .85s;
}

/*Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Resizing */

/* Mobile Responsive layout - makes the columns stack on top of each other */
@media screen and (max-width: 949px) {
	h8 {
		color: #FFFFFF;	
	}
	
	.big_title{
		display: none;
	}

	.small_title{
		display: inline;
		font-size:35px;
		font_weigt:700;
	}
	
	.content{
		padding-top: 15px;
	}
	.column {
		flex: 50%;
		max-width: 50%;
		justify-content: center;
	}
	.canvas {
		padding: 10px;
	}
	.projectcanvas {
		padding: 10px;
	}
	.borderbox {
		transform: translateX(2%);
	}
	
	/* This keeps fade in and title from showing on mobile */
	.projectimg:hover {
		opacity: 1;
	}
}

/* End resizing */