@media only screen and (max-width:736px) {
	html {
		font-size: 16px
	}
}

@media only screen and (max-width:300px) {
	html {
		font-size: 14px
	}
}

@media only screen and (max-width:736px) {
	h1.hero-heading {
		font-size: 3.5rem
	}
}

@media only screen and (max-width:320px) {
	h1.hero-heading {
		font-size: 2.0rem
	}
}

@media only screen and (max-width:736px) {
	h2 {
		font-size: 1.5rem
	}
}

@media only screen and (max-width:300px) {
	h2 {
		font-size: 1.25rem
	}
}

@media only screen and (max-width:736px) {
	.reverse {
		-webkit-flex-direction: row-reverse;
		flex-direction: row
	}
}

@media (max-height:700px) {
	a.look-around {
		display: none
	}
}

@media only screen and (max-width:736px) {
	a.look-around {
		display: none
	}
}

@media only screen and (max-width:736px) {
	.hero {
		padding: 1.5em 0;
		height: 100%
	}
}

@media only screen and (max-width:300px) {
	.hero {
		padding: 1.5em 0
	}
}

@media only screen and (max-width:736px) {
	.hero-heading {
		margin: .05em
	}
}

@media only screen and (max-width:736px) {
	h3.hero-subheading {
		max-width: 90%
	}
}

@media only screen and (max-width:320px) {
	div.about-text {
		font-size: 1em;
	}
}



@media only screen and (max-width:736px) {
	.nav-items {
		padding: 1.5em 0;
		width: 33%
	}
}

@media only screen and (max-width:300px) {
	.nav-items {
		width: 100%
	}
}

@media only screen and (max-width:736px) {
	.project-group>li {
		margin: .5em 0
	}
}

@media only screen and (max-width:736px) {
	img.col-1 {
		margin-top: 30px;
		width: 80%;
	}
}



@media only screen and (max-width:320px) {
	img.col-1 {
		margin-top: 30px;
		width: 80%;
	}
}

@media only screen and (max-width:736px) {
	.col-1 {
		width: 45%;
		display: block
	}
}

@media only screen and (max-width:300px) {
	.col-1 {
		width: 80%
	}
}

@media only screen and (max-width:736px) {
	.col-2 {
		width: 100%;
		display: block;
		margin: 1.75em auto
	}
}

@media only screen and (max-width:400px) {
	.project-links>li {
		/*width: 100%;*/
		margin: .5em auto;
	}
}


@media only screen and (max-width:400px) {
	.project-skills>li {
		width: 40%;
		margin: .5em auto,
	}
}

@media only screen and (max-width:420px) {
	.project-skills-list>li {
		display: inline-block;
		vertical-align: middle;
		margin: .5em;
		width: auto;
	}
}

@media only screen and (max-width:400px) {
	.project-skills-list>li {
		display: inline-block;
		vertical-align: middle;
		margin: .5em;
		width: auto;
	}
}

@media only screen and (max-width:320px) {
	.project-skills-list>li {
		display: inline-block;
		vertical-align: middle;
		margin: .5em;
		width: auto;
	}
}