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

/* =========== MEDIA QUERY  =========== */
/*--- HEADER styles---*/
@media screen and (min-width: 769px) {
  	.logo {
		float: right;
	}

  	.container {
		margin-left: 5%;
		margin-right: 5%;
	}

	.nav {
		line-height: 1em;
	}

	.menu {
		display: block;
		text-align: left;
		position: absolute;
		top: 0;
		background: none;
	}


	.menu li {
		display: inline-block;
	}

	.menu ul li {
		position: relative;
	}

	.submenu {
		position: absolute;
		width: 450px;
	}

	.submenu ul {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.submenu ul li {
		display: block;
		padding-top: 0.65em;
		text-align: left;
		margin: 2px;
	
	}

	.submenu ul li a {
		text-decoration: none;
		color: var(--md-gray-color);
		padding: 0 5px;
		display: block;

	}
	



   .btn{
		display: inline-block;
		margin-right: 3em;
		border-bottom: 0px;
		position: relative;
		line-height: 1.75em;
	}

	/*

	.btn::after {
		content:'';
		display: block;
		height: 2px;
		background: var(--main-color);
		width: 100%;
		position: absolute;
		transform: scale(0, 1);
		transform-origin: left;
		transition: transform ease-in-out 250ms;
	}

	.btn:hover::after{
		transform: scale(1,1);
	}
	*/

	#toggle:unchecked + .menu{
		display: none;
	}

	label {
		display: none;
	}

/* PROJECT TYPES styles */
	.mywork-btn-container {
		max-width: 100%;
	}

	.mywork-btn-image {
		width: 250px;
		height: 100%;
	}

	.title-box h1{
		font-size: 1.5em;
	}


/* ABOUT page styles */
	.about-me-portrait {
		float: right;
		margin-left: 1em;
		display: block;
		overflow: auto;
	}

/* WORKS page styles */
.breadcrumb {
	display: block;
}

.breadcrumb-sticky-side, .breadcrumb-sticky-side-btn {
	display: none;
}





}