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


/***** TYPE STYLING *****/
	@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@400;700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext');
	/*Main Head*/
		h1 {
			font-family: 'Montserrat', sans-serif;
			font-size: 14px;
			line-height: 32px;
			letter-spacing: 0.2em;
			font-weight: 400;
			text-align: center;
			text-transform: uppercase; }
		h1 a:link, h1 a:visited { text-decoration: none; color: #000000; }
		h1 a:hover, h1 a:active { color: #919191; }
	/*Sub Head*/
		h2 {
			font-family: 'Montserrat', sans-serif;
			font-size: 12px;
			line-height: 20px;
			letter-spacing: 0.2em;
			font-weight: 400;
			text-align: center;
			text-transform: uppercase; }
		h2 a:link, h2 a:visited { text-decoration: none; color: #000000; }
		h2 a:hover, h2 a:active { border-bottom: 1.25px solid; padding-bottom: 4px; }
	/*Other&Copyright*/
		h3 {
			font-family: 'Montserrat', sans-serif;
			font-size: 8px;
			line-height: 16px;
			letter-spacing: 0.2em;
			font-weight: 400;
			text-transform: uppercase;
			color: #919191; }
		h3 a:link, h3 a:visited { text-decoration: none; color: #919191; }
		h3 a:hover, h3 a:active { border-bottom: 1.25px solid; padding-bottom: 4px; color: #919191; }
	/*Body Copy*/
		p {
			font-family: 'Lato', sans-serif;
			font-size: 14px;
			line-height: 30px;
			font-weight: 300; }
		p a:link, p a:visited { 
			text-decoration: none; color: #000000; 
			font-family: 'Montserrat', sans-serif; font-size: 10px; 
			padding-left: 3px;
			letter-spacing: 0.2em; font-weight: 400; text-transform: uppercase; }
		p a:hover, p a:active { color: #919191; border-bottom: 1.25px solid; padding-bottom: 4px; }

/***** NAVIGATION MENU *****/
	.logo {
		position: fixed;
		left: 20px;
		top: 20px;
		width: 46px;
		height: 70px;
		background-color: none; 
		background-repeat: no-repeat; 
		background-position: center center;
		-webkit-background-size: contain; 
		-moz-background-size: contain; 
		-o-background-size: contain; 
		background-size: contain;
		z-index: 1000; }
	.logo:hover {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		filter: alpha(opacity=50);										
		opacity:0.5; }
	nav ul {
		position: fixed;
		top: 20px;
		right: 20px;
		padding: 0;
		list-style: none;
		font-family: 'Montserrat', sans-serif; 
		color: #000000; 
		font-size: 9px; letter-spacing: 0.2em; line-height: 16px;
		z-index: 1000; }
	nav li {
		display: inline-block;
		margin-left: 20px; }
	nav li a:link, nav li a:visited { text-decoration: none; color: #000000; }
	nav li a:hover, nav li a:active { border-bottom: 1.25px solid; padding-bottom: 4px; }
	.current-page { border-bottom: 1.25px solid; padding-bottom: 4px; }


/***** STRUCTURE ******/
	html {
		margin: 0;
		padding: 0;
		height: 100%; }
	body {
		margin: 20px;
		background-color: #FFFFFF; }
	#top {
		position: absolute;
		top: 0px; }
	.float-clear {
		clear: both; }

/***** CONTENT *****/
	/*HOMEPAGE*/
		.home {
			margin: 20px;
			margin-top: 35vh;
			margin-bottom: 35vh; }
		.home .main {
			position: relative;
			width: 200px;
			height: 100px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 30px;
			background-image: url('../images/main.gif');
			background-color: none; 
			background-repeat: no-repeat; 
			background-position: center center;
			-webkit-background-size: cover; 
			-moz-background-size: cover; 
			-o-background-size: cover; 
			background-size: cover;
			z-index: 10; }
	
	/*PROJECT GALLERY*/		
		#gallery {
			width: 70%;
			margin-left: 15%;
			margin-right: 15%; }
		#gallery div {
			float: left;
			overflow: hidden;
			background-color: #FFFFFF;
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			-moz-transition: all 0.3s;
  			-webkit-transition: all 0.3s;
  			transition: all 0.3s;  }
		#gallery div img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 100%; }
  		#gallery div:hover {   
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
			filter: alpha(opacity=50);										
			opacity:0.5; }

		.project1, .project5, .project6 /*TALL*/{
			width: 50%;
			height: auto; }
		.project2, .project3 /*SHORT*/{
			width: 50%;
			height: auto; }
		.project4, .project7 /*WIDE*/{
			width: 100%;
			height: auto; }

		.project1 /*TALL*/ {
			margin: 10vh 0 0 0;	}
		.project3 /*SHORT*/ {
			margin: 14vh 0 0 0; }
		.project6 /*TALL*/ {
			margin: 15vh 0 0 0; }
		.project7 /*WIDE*/ {
			margin: 10vh 0 15vh 0; }

	.project {
		width: 70%;
		margin-top: 1%;
		margin-bottom: 4%;
		margin-left: auto;
		margin-right: auto; }
	.project img {
		width: 86%;
		margin-left: 7%;
		margin-right: 7%; }

	.projectmain-alt {
		display: none;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden; }
  	.projectmain-alt img {
		display: none;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3%;
		margin-bottom: 3%;
		max-width: 100%; }

	.profile {
		margin-top: 0px;
		margin-bottom: 50px;
		width: 86%;
		margin-left: 7%;
		margin-right: 7%; }
	.profile h1 {
		font-size: 12px;
		margin-top: 25px; }
	.sidesub {
		width: 200px;
		margin-right: 10px;
		float: left; }
	.sidesub h2 {
		text-align: left; }
	.introp {
		margin-top: 5px; }
	.process {
		margin: 75px 7% 75px 7%;
		width: 86%; }

	/*MODAL GALLERY*/
		/* Button Styling */
		#myBtn {
			background-color: transparent;
		 	border: none;
		 	padding: 0px 0px 5.25px 0px;
		 	font-family: 'Montserrat', sans-serif;
			font-size: 8px;
			line-height: 16px;
			letter-spacing: 0.2em;
			font-weight: 400;
			text-transform: uppercase;
			text-align: center;
		 	color: #919191; }
		#myBtn:hover {
		 	border-bottom: 1.25px solid; padding-bottom: 4px;
		 	cursor: pointer; }
		
		/* The Modal (background) */
		.modal {
		 	display: none; /* Hidden by default */
 			position: fixed; /* Stay in place */
		 	z-index: 1000; /* Sit on top */
		 	top: 0; /* Position background flush top */
		 	left: 0; /* Position background flush left */
		 	padding-top: 5vh; /* Location of the box */
		 	width: 100%; /* Full width */
		 	height: 100%; /* Full height */
		 	overflow: auto; /* Enable scroll if needed */
		 	background-color: rgba(255,255,255,0.95); /* white w/ opacity */ }

 		/* Modal Content */
 		.modal-content {
 			margin: auto;
 			width: 975px; }
 		.smallscreenmodal {
 			display: none;
 			width: 80%;
 			margin-left: auto;
 			margin-right: auto;
 			padding-top: 50px;
 			padding-bottom: 50px; }

 		/* The Close Button */
		.close {
			margin-top: 15px;
			float: left;
    		color: #000000;
    		font-family: 'Montserrat', sans-serif;
			font-size: 14px;
			line-height: 32px;
			letter-spacing: 0.2em;
			font-weight: 400; }
		.close:hover, .close:focus {
    		color: #919191;
    		cursor: pointer; }

	.llink {
		float: left; }
	.rlink {
		float: right; }

	.about {
		width: 55%;
		margin-top: 5vh;
		margin-bottom: 7vh;
		margin-left: auto;
		margin-right: auto;  }
	.portrait {
		width: 34%;
		height: auto;
		margin: 5% auto 5% auto; }
  	.portrait img {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%; }

	.contact {
		margin-top: 34vh; }
	.email, .connect {
		width: 50%;
		float: left; }

	footer {
		position: relative;
		background-color: #FFFFFF;
		margin-right: auto;
		margin-left: auto;
		height: auto;
		text-align: center; 
		padding-bottom: 20px;}
	.to-top {
		margin-top: 1%;
		margin-bottom: 1%; }


/***** MEDIA QUERIES GO HERE ******/
	/* for 1450px or more */
	@media screen and (min-width: 1450px) {
		.home {
			margin-top: 40vh;
			margin-bottom: 40vh; }
		.home .main {
			width: 250px;
			height: 125px; }

	}

	/* for 1060px or less */
	@media screen and (max-width: 1060px) {
		nav ul {
			top: -5px;
			-webkit-transform-origin: 100% 0;
			transform-origin: 100% 0;
			-webkit-transform: rotate(90deg) translate(100%, 0);
			transform: rotate(90deg) translate(100%, 0); }

		#gallery {
			width: 80%;
			margin-left: 10%;
			margin-right: 10%; }

		.project3 /*SHORT*/ {
			margin: 15vh 0 0 0; }

		.project {
			width: 75%; }
		.project img, .profile {
			width: 90%;
			margin-left: 5%;
			margin-right: 5%; }

		#canvas, .thumbnails, .magazine-viewport {
			display: none; }
		.modal {
			background-color: rgba(200,200,200,0.9); /* black w/ opacity */ }
		.modal-content {
			width: 500px;
			margin: 25vh auto auto auto;
			background-color: white; }
		.smallscreenmodal {
			display: block; }


		.portrait {
			width: 40%; }
		.about {
			width: 70%; }

		.contact {
			margin-top: 20vh; }
		.email, .connect {
			width: 100%;
			text-align: center; }
		.connect {
			margin-top: 10vh; }
	}		

	/* for 820px or less */
	@media screen and (max-width: 820px) {
		.home {
			width: 70%;
			margin: 36vh auto 40vh auto; }
		.home .main {
			width: 175px;
			height: 87.5px; }

		#gallery {
			width: 75%;
			margin-left: 12.5%;
			margin-right: 12.5%; }
		.project1, .project2, .project3, .project4, .project5, .project6 {
			width: 100%;
			margin: 3vh auto 3vh auto; }
		.project7 {
			width: 100%;
			margin: 6vh auto 12vh auto; }

		.sidesub {
			width: 100%;
			margin-right: 0;
			text-align: center;
			margin-bottom: 15px; }
		.sidesub h2 {
			text-align: center; }

		.projectmain {
  			display: none; }
  		.projectmain-alt {
  			display: block;
  			width: 100%; }
  		.projectmain-alt img {
  			display: block; }

  		.modal-content {
			width: 75%; }

  		.portrait {
			width: 50%; }
	}

	/* for 670px or less */
	@media screen and (max-width: 670px) {
		.logo {
			left: 10px;
			top: 10px;
			width: 40px;
			height: 60px; }
		nav ul {
			right: 10px;
			top: -10px; }
		h1 {
			font-size: 12px;
			line-height: 26px; }
		h2 {
			font-size: 10px;
			line-height: 18px; }
		h3 {
			font-size: 7px;
			line-height: 14px; }
		nav ul {
			font-size: 8px; }
		p {
			font-size: 12px;
			line-height: 25px; }
		.profile h1 {
			font-size: 10px; }

		.home .main {
			width: 150px;
			height: 75px; }

		#gallery {
			width: 90%;
			margin-left: 5%;
			margin-right: 5%; }

		.project img, .profile {
			width: 100%;
			margin-left: 0;
			margin-right: 0; }

		.portrait {
			width: 60%; }

		footer {
			padding-bottom: 10px; }		
	}

	/* for 480px or less (iPhone 6s Plus) */
	@media screen and (max-width: 480px) {
		.home .main {
			width: 150px;
			height: 75px; }
		.profile {
			width: 90%;
			margin-left: 5%;
			margin-right: 5%; }
	}

	/* for 350px or less (iPhone 6s, iPhone SE) */
	@media screen and (max-width: 350px) {
		p {
			font-size: 10px;
			line-height: 22px;
			text-align: center; }
		.logo {
			left: 10px;
			top: 10px;
			width: 30px;
			height: 45px; }
		nav ul {
			right: 5px;
			top: -15px;
			font-size: 6.5px; }
		footer {
			padding-bottom: 5px; }	
	}