@import url('https://fonts.cdnfonts.com/css/din-condensed');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');

/* Header */
.identity.mollihans {
	width:100%;
	height:auto;
	}

.nav1 {
	font-family:din condensed;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.nav1:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.nav1:hover {
	background-position: 0;
}
.nav1:hover::before{
 	width: 100%;
}
.nav2 {
	font-family:din condensed;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.nav2:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.nav2:hover {
	background-position: 0;
}
.nav2:hover::before{
 	width: 100%;
}
li {
	font-size:18px;
}


/* Name and Description */
p.intro {
	font-family:din condensed;
	font-weight:bold;
}
p.description {
	font-family:Open Sans;
	font-size:12px;
	line-height:18px;
	font-weight:lighter;
	width:340px;
}

/* Home Page */
.tracing {
	font-family:Din Condensed;
	font-size:22px;
	margin-top:50px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.tracing:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.tracing:hover {
	background-position: 0;
}
.tracing:hover::before{
 	width: 100%;
}

.kanye {
	font-family:Din Condensed;
	font-size:22px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.kanye:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.kanye:hover {
	background-position: 0;
}
.kanye:hover::before{
 	width: 100%;
}

.antihero {
	font-family:Din Condensed;
	font-size:22px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.antihero:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}

.scratchpreview {
	opacity:0;
	position:absolute;
	width:25%;
	height:auto;
}
.antihero:hover ~ .scratchpreview {
 	opacity:100;
 	display:block;
 	position:absolute;
 	right:50px;
 	top:200px;
 	z-index:2;
}
.heademp {
	font-family:Din Condensed;
	font-size:22px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.heademp:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.heademp:hover {
	background-position: 0;
}
.heademp:hover::before{
 	width: 100%;
}

.maggie {
	font-family:Din Condensed;
	font-size:22px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.maggie:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.maggie:hover {
	background-position: 0;
}
.maggie:hover::before{
 	width: 100%;
}

.mangia {
	font-family:Din Condensed;
	font-size:22px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.mangia:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.mangia:hover {
	background-position: 0;
}
.mangia:hover::before{
 	width: 100%;
}

.grand {
	font-family:Din Condensed;
	font-size:22px;
	text-decoration:none;
	/* Hover effect */
	background-image: linear-gradient(
    to right,
    #ec008d,
    #ec008d 50%,
    #000 50%
 	);
 	background-size: 200% 100%;
 	background-position: -100%;
 	display: inline-block;
 	padding: 5px 0;
 	position: relative;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	transition: all 0.3s ease-in-out;
}
.grand:before {
 	content: '';
  	background: #ec008d;
 	display: block;
 	position: absolute;
  	transition: all 0.3s ease-in-out;
}
.grand:hover {
	background-position: 0;
}
.grand:hover::before{
 	width: 100%;
}


/* Tracing Nike Air Max 95*/
div.colhalf {
	width:50%;
}
.originalshoe {
	width:100%;
	height:auto;
}
.traceshoe {
	width:100%;
	height:auto;
}

/* Visual Data */
.kanyeposter {
	width:100%;
	height:auto;
}
.kanyeposterinspo {
	width:100%;
	height:auto;
	margin-top:50px;
}

/* Editorial Composition */
.magazine {
	display:flex;
	justify-content:center;
	margin-top:20px;
}
.magazinecover {
	width:100%;
	height:auto;
}
.article1 {
	width:100%;
	height:auto;
	margin-top:-20px;
}
.article2 {
	width:100%;
	height:auto;
	margin-top:20px;
	margin-bottom:20px;
}
.article3 {
	width:100%;
	height:auto;
}
.article41 {
	width:100%;
	height:auto;
	margin-top:-20px;
}
.article42 {
	width:100%;
	height:auto;
	margin-top:-30px;
}
.article5 {
	width:100%;
	height:auto;
	margin-top:-20px;
}

/* Film Festival */
.heroposter {
	width:100%;
	height:auto;
}
.heroinspo {
	width:77%;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.heroiterations {
	width:100%;
	height:auto;
}

/* Object to Subject */
.headempty1 {
	width:95%;
	height:auto;
}
.headempty2 {
	width:95%;
	height:auto;
	margin-left:20px;
}
.gif {
	width:100%;
	height:auto;
	margin-top:50px;
}
.coloroutline {
	width:100%;
	height:auto;
	margin-top:25px;
}
.outlines {
	width:100%;
	height:auto;
}

/* Typographic Resturant */
.restaurantvid {
	width:100%;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.restsmallscreen {
	width:100%;
	height:auto;
}

/* Trails UX  */
.trailsvid {
	width:100%;
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.trailsexplanation {
	width:100%;
	height:auto;
	margin-top:30px;
}






















* {
	box-sizing:border-box;
}
html {
	font-size:62.5%;
}

body {
	margin:0;
	padding:0 0 4.0rem;
	font-family:"Helvetica Neue",helvetica,arial,sans-serif;
}

/* typography */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
label {
	margin:0 0 2.4rem;
	padding:0;
}
ul,
ol,
dl {
	margin-bottom:3.2rem;
}
label {
	margin-bottom:0.4rem;
}

h1 {
	font-size:4.8rem;
	line-height:5.76rem;	
}
h2 {
	font-size:4.0rem;
	line-height:4.8rem;
}
h3 {
	font-size:3.2rem;
	line-height:3.84rem;
}
h4 {
	font-size:2.8rem;
	line-height:3.36rem;
}
h5 {
	font-size:2.4rem;
	line-height:2.88rem;
}
h6 {
	font-size:2.0rem;
	line-height:2.4rem;
}
p,
ul,
ol,
dl,
label {
	font-size:1.6rem;
	line-height:2.4rem;
}

header {
	position:sticky;
	top:0;
	background-color:#fff;
}

nav ul {
	margin:0;
	padding:0;
	list-style-type:none;
	display:flex;
	justify-content:space-between;
}

nav ul li {
	width:50%;
}

nav ul a {
	display:block;
	margin:0;
	padding:1.0rem 2.0rem;
	text-align:center;
	text-decoration:none;
	color:black;
}

nav {
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff;
}
.identity p {
	margin:0;
	padding:1.0rem 2.0rem 1.0rem 0;
}

section {
	margin:0;
	padding:1.0rem 0;
}

footer {
	border-top:solid 1px #e2e2e2;
	position: fixed;
  	bottom: 0;
  	width: 100%;
  	height: 40px;   /* Height of the footer */
 	background:white;
}

.copyright {
	font-size:1.0rem;
}

.container {
	padding:0.5rem 2.0rem;
}

p.intro {
	margin:0;
	font-size:2.6rem;
	line-height:3.0rem;
}

div.project {
	padding:1.0rem;
	background-color:#f1f1f1;
}

.row {
	margin:0 0 0.8rem;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.row.flush {
	margin-bottom:0;
}

.col {
	width:100%;
	margin-bottom:0.8rem;
}

.row.flush .col,
.col:last-child {
	margin-bottom:0;
}

.col.half {
	width:calc(50% - 0.4rem);
	margin-bottom:0;
}

.row.flush .col.half {
	width:50%;
}

@media screen and (min-width:769px) {
	/* medium screens */
	header .container {
		display:flex;
		justify-content:space-between;
		align-items:center;
	}
	nav {
		position:static;
		left:auto;
		right:auto;
		bottom:auto;
	}
	.col {
		width:calc(20% - 0.7rem);
		margin-bottom:0;
	}
	.row.flush .col {
		width:20%;
	}
	.col.third {
		width:calc(33.333% - 0.5rem);
	}
	.row.flush .col.third {
		width:33.333%;
	}
	.col.quarter {
		width:calc(25% - 0.66rem);
	}
	.row.flush .col.quarter {
		width:25%;
	}

}

@media screen and (min-width:1025px) {
	/* large screens */

}

@media screen and (min-width:1200px) {
	/* xlarge screens */
	.container {
		margin:0 auto;
		max-width:1200px;
	}
}

@media screen and (max-width:769px) {

/* Typographic Resturant */
.restsmallscreen {
	display:none;
}

/* Trails UX  */
.trailsexplanation {
	display:none;
}

/* Navigation */
nav {
		position:static;
		left:auto;
		right:auto;
		bottom:auto;
		float:right;
		margin-top:20px;
	}
.nav1 {
	display:none;
}

}