@font-face { font-family: Roboto; src: url('Roboto-Medium.ttf'); }
@font-face { font-family: Roboto; font-weight: medium; src: url('Roboto-Medium.ttf');}

* {
	font-family: Roboto, sans-serif;
	font-weight:normal;
	color:#666666;	
	margin:0 0 0 0;
	border:none;
	padding:0 0 0 0;
	padding-inline-start:0px;
	/* outline: 1px red solid;  */
}

h3 {
	font-size: 10pt;
}

h4 {
	font-size: 8pt	
}

p {
	font-size: 14px;
	line-height:1.6;
	margin-bottom:20px;
	text-align:justify;
}

a {
	text-decoration:none;
	transition: color 0.4s;
}

a:hover{
	color:#b8cc52;
}

/* Global */

header, .content, footer {
	width:100%;
}

.container {
	max-width:1140px;
	margin:auto;
	padding-right:60px;
}

.portfolio, .project, .about, .contact {
	padding-top:185px;
	overflow:hidden;
	margin:auto;
	padding-left:205px;
	padding-right:60px;
	max-width:935px;
}

.aside {}


.sidebar {}


/* Header */

header {
	background:#dddddd;
	color:#666666;
	z-index:90;
	position:fixed;
	transition: all 0.6s;
	border-bottom:1px solid #666666;
	height:138px;
}

.logo {
	position:relative;
	float:left;
	width:125px;
	height:59px;
	margin-left:40px;
	margin-right:40px;
	margin-top:40px;
	margin-bottom:40px;
	transition: all 0.6s;
}

.logo img {
	width:100%;
	height:100%;	
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.6s;
}

.ll {
	opacity: 1;
	z-index: 99;
}

.hl {
	opacity: 0;
}

.logo:hover .hl {
	opacity: 1;
}

.logo:hover .ll {
	opacity: 0;
}


.namemark {
	float:left;
	margin-top:80px;
	margin-left:1px;
	margin-bottom:1px;
	transition: all 0.6s;
}

.titles {
	transition: all 0.6s;
}	

header h1 {
	font-size:16pt;
	transition: all 0.6s;
}

header h2 {
	font-size:9pt;
	transition: all 0.6s;	
	display:inline;
	font-weight: normal;
}

header nav {
	margin-top:108px;
	font-size:9pt;
	float:right;
	transition: all 0.6s;
}

nav li {
	display:inline;
	margin-left:10px;
}

/* Collapsed Header */

.smaller {
	height:55px;
}

.smaller .logo {
	width:60px;
	height:28px;
	margin-top:12px;
	margin-bottom:12px;
	margin-left:128px;
	margin-right:16px;
}
	
.smaller .namemark {
	margin-top:18px;
	/* line-height:0.5; */
}	
	
.smaller h1 {
		font-size:16px;
}
	
.smaller h2 {
	font-size:4px;
	opacity:0;
}	
	
.smaller nav {
	margin-top:24px;
}


/* PORTFOLIO */

.splash {
	height:250px;
	width:100%;
	object-fit:cover;
}

.portfolio {
	list-style-type:none;
}

.preview {
	float:left;
	height:325px;
	width:15.5%;
	font-weight:normal;
	padding-right:1%;
	margin-bottom:20px; 
	list-style:none;
	transition: width 0.4s;
}

.perrow2 { width:49% }
.perrow2.minimize { width:24% }
.perrow2.maximize { width:74% }

.perrow3 { width:32% }
.perrow3.minimize { width:15.5% }
.perrow3.maximize { width:65% }

.perrow4 { width:24% }
.perrow4.minimize { width:15.5% }
.perrow4.maximize { width:49% }

.perrow5{ width:19% }
.perrow5.minimize { width:11% }
.perrow5.maximize { width:49% }

.perrow6{ width:15.5% }
.perrow6.minimize { width:11% }
.perrow6.maximize { width:39% }
	
.minimize h3, .minimize h4 {
	opacity:0;
}
	
.maximize h3, .maximize h4 {
	opacity:1;
}

.preview h3{
	font-weight:bold;
	margin-bottom:5px;
}


/* PROJECTS */

.showcase {
	width:100%;
	height:400px;
	border: 1px solid #dddddd;
	margin-bottom:40px;
}

.project h1 {
	margin-bottom:5px
}

.project h2 {
	font-size:14pt;
	margin-bottom:20px;
	font-weight:bold;
}

.project li {
	font-size:14px;
	margin-left:20px;
}

.hero {
	width:100%;
	height:400px;
	object-fit:cover;
}

.sidebar {
	float:right;
	width:40%;
	font-size: 14px;
	line-height:1.6;
	margin-left:30px;
	margin-bottom:30px;
	padding:20px 20px 10px 20px;
	background-color:#dddddd;
}

.sidebar h4 {
	font-size:14pt;
	padding-bottom:8px;
	font-weight:bold;
}

.sidebar h5 {
	font-size:10pt;
	font-weight:bold;
}

.sidebar ul {
	margin-bottom:20px;
}

.sidebar li {
	float:none;
	margin-left:20px;
	margin-bottom:8px;
}

/* ABOUT */

	.about .aside {
		float:right;
		width:50%;
		margin-bottom:20px;
	}
	
	.about .description {
		float:left;
		width:45%;
		margin-right:5%px;
	}
	
	.portrait {
		margin-bottom:30px;
		width:100%;
	}
	
	.about .sidebar {
		width:auto;
		margin:auto;
		font-size:12px;
	}
	
/* CONTACT */

	.contact .description {
		float:left;
		width:45%;
		margin-right:5%;
	}
	
	.contact form {
		float:right;
	}
	
	
	input, textarea {
		border:1px #dddddd solid;
		display:block;
		width:100%;
		height:27px;
		background:#efefef;
		border:1px solid #dedede;
		padding:10px;
		margin-top:3px;
		font-size:12px;
		color:#3a3a3a;
	}
	
	textarea {
			height:150px;
	}

	
/* FOOTER */

footer h6 {
	padding-top:20px;
	border-top:1px #dddddd solid;
	margin-top:20px;
	margin-left:205px;
	max-width:975px;
	text-align:center;
	margin-bottom:40px;
}

	
	
@media(max-width: 900px){
	
	.container {
		padding-right:30px;
	}
	
	.portfolio, .project, .about, .contact {
		padding-top:155px;
		padding-left:140px;
		padding-right:30px;
		max-width:975px;
		margin:auto;
	}
	
	.logo {
		width:100px;
		height:45px;
		margin-top:55px;
		margin-left:20px;
		margin-right:20px;
		margin-bottom:20px;
	 }
	
	.titles {
		opacity:0;
		width:0px;
		font-size:2px;
	}
	
	/* Smaller */
	
	.smaller .logo {
		width:60px;
		height:30px;
		margin-top:12px;
		margin-bottom:12px;
		margin-left:62px;
	}	
		
	footer h6 {
		margin-left:140px;
	}
}
	

@media(max-width: 625px) {
		
	.portfolio, .project, .about, .contact, .a {
		padding-left:0px;
		padding-right:0px;
	}
	
	.container, .content {
		margin:auto;
		margin:auto;
		padding-left:20px;
		padding-right:20px;
	}
	
	.portfolio li, .about .aside, .about .description, .contact form, .contact .description {
		float:none;
		margin-right:0px;
		padding-bottom:5px;
		width:auto;
		display:block;
	}
	
	nav li {
		font-size:2px;
		opacity:0;	
	}

	.sidebar, form {
		float:none;
		width:auto;
		font-size: 12px;
		margin-bottom:30px;
		margin-left:0px;
		margin-right:0px;
		padding:20px 20px 10px 20px;
		background-color:#dddddd;
	}

	.sidebar h4 {
		font-size:10pt;
		padding-bottom:8px;
	}

	.sidebar ul {
		margin-bottom:20px;
	}

	.sidebar li {
		margin-left:20px;
		margin-bottom:8px;
	}
	
	.smaller .namemark{
		font-size:2px;
		opacity:0;
	}
	.smaller nav li {
		font-size:12px;
		opacity:1;
	}
	
	.smaller .logo {
		margin-left:20px;
	}
	
	/* ABOUT */
	
	/* CONTACT */
	
	footer {
		margin-top:10px;
	}
}