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

/* Table of Contents

--------------------------------1 Body
--------------------------------2 Typography
--------------------------------------2.1 Headings
--------------------------------------2.2 Body Copy
--------------------------------------2.3 Buttons
--------------------------------------2.4 Forms
--------------------------------------2.5 Lists
--------------------------------------2.6 Tables
--------------------------------3 Navigation Menues
--------------------------------------3.1 Main
--------------------------------------3.2 Sub
--------------------------------4 Structure
--------------------------------------4.1 Site Content
--------------------------------------4.2 Site Header
--------------------------------------4.3 Site Footer
--------------------------------5 Media
--------------------------------------5.1 Sprites
--------------------------------------5.2 Images
--------------------------------6 Other
--------------------------------------6.1 Colors
--------------------------------------6.2 Media Queries

*/




/* Table of Contents

--------------------------------1 Body
*/

footer {
	text-align: center;
}

/*
--------------------------------2 Typography
*/

p {
	font-size: 16px;
}

/*
--------------------------------------2.1 Headings
*/

h1 {
	margin-top: 20rem;
}

/*
--------------------------------------2.2 Body Copy
*/

.work {
	border-bottom: #9957a3 solid 1px;
	margin-bottom: 1rem;
}

/*
--------------------------------------2.3 Buttons
*/



/*
--------------------------------------2.4 Forms
*/



/*
--------------------------------------2.5 Lists
*/

ul {
	list-style: none;
}

/*
--------------------------------------2.6 Tables
*/



/*
--------------------------------3 Navigation Menues
*/

.fixed {
	position: fixed;
	margin-top: 1rem;
}

/*
--------------------------------------3.1 Main
*/

#large-display-nav ul li:first-child {
	padding-top: 1rem;
}

a { 
	color: #fff; 
	text-decoration: none; 
	transition: .15s; 
}

a:active { 
	color: #000; 
}

button { 
	color: #fff; 
	font-size: 1rem; 
	font-weight: bold; 
	position: absolute; 
	left: 0; 
	width: 50%; 
	padding: 1rem; 
	margin: 0; 
	margin-left: -10%;
	margin-right: -10%;
	-webkit-appearance: none; 
	-moz-appearance: none; 
	border: none; 
	transition: .15s; 
}

button.second-toggle { 
	left: 50%; 
	right: 0;
}

button:focus { 
	outline: none; 
}

button.close { 
	width: 100%; 
	text-align: right; }

.menu-container { 
	margin-left: -6%; 
	margin-right: -6%; 
}

.menu-container.open { 
	display: block; 
	height: 100%!important;
	background-color: #9957a3; 
	transition: .2s; 
}

.main-nav-list { 
	list-style: none; 
	list-style-image: none; 
	padding-left: 0;
	margin: 0;
}
	
.main-nav-item { 
	margin: 0; 
	text-align: center;
	font-size: .8rem;
}

.main-nav-link {
	display: block; 
	padding: 1rem; 
	background: #bc97c6; 
	text-transform: uppercase;
}

.main-nav-link:active, .main-nav-link:hover {
	color: #9957a3;
	background: #fff;
	border: #9957a3 solid 2px;
}

.pane { 
	position: relative; 
}

.js .js-hide, .close, .js-toggle { 
	display: none; 
}

.js .close { 
	display: block; 
	position: static; 
}

.js .menu-content { 
	position: absolute; 
	left: 0; 
	right: 0;
}

.js .js-toggle { 
	background-color: #9957a3; 
	margin: 0; 
	display: block; 
	border: #9957a3 solid 2px;
}

.js-toggle.active { 
	background-color: #fff; 
	color: #9957a3;
}

.nav-button-large a, .nav-button a {
	color: #fff;
	background-color: #9957a3;
	padding: .2rem;
	display: block;
	text-align: center;
	border: #9957a3 solid 2px;
	text-transform: uppercase;
	margin: .3rem;
	font-size: .6rem;
}

#medium-display-nav {
	background-color: rgba(255,255,255,0.86);
}

.nav-button-large a:hover, .nav-button a:hover {
	color: #9957a3;
	background-color: #fff;
	font-size: .8rem;
}

.nav-button a {
	width: 80%;
	margin: .5rem;
}

.nav-button a:hover {
	margin: .35rem;
}

.icon {
	margin: 1.3rem 0;
}

/*
--------------------------------------3.2 Sub
*/

.contact li {
	margin-top: 10px;
	padding: 2px;
}

#secondary-page-nav img {
	height: 3rem;
	width: auto;
}

#secondary-page-nav li {
	list-style: none;
	list-style-image: none;
}

/*
--------------------------------4 Structure
*/

.margin {
	margin-top: 8rem;
	margin-bottom: 5rem;
}

/*
--------------------------------------4.1 Site Content
*/



/*
--------------------------------------4.2 Site Header
*/



/*
--------------------------------------4.3 Site Footer
*/


/*
--------------------------------5 Media
*/


/*
--------------------------------------5.1 Sprites
*/



/*
--------------------------------------5.2 Images
*/

.work img, .featured-image img, .featured-image p {
	margin: 1rem 0;
}

img {
	height: 100%;
	width: 100%;
}

.work img:hover {
	opacity: .7;
}

.show-for-medium-only .social-link {
	width: 50%;
	padding: 0;
	margin: 0;
	background-color: transparent;
}

.contact-icon img {
	height: 6rem;
	width: auto;
}


/*
--------------------------------6 Other
*/

.rule-top {
		border-top: #9957a3 solid 1px;
		margin-top: 1rem;
		padding-top: 1rem;
		height: 1px;
		width: 100%;
		display: block;
	}
	
footer[class="rule-top"] {
	margin-top: 15rem;
}

/*
--------------------------------------6.1 Colors
*/

/*
--------------------------------------6.2 Media Queries
*/

@media screen and (min-width:1024px) {
	body {
		margin: 0 7rem;
	}

	#large-display-nav {
		background: top right url(../img/octopus-grayscale-large.jpg);
		height: 1000px;
	}
	
	li>img {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding-bottom: .5rem;
		padding-top: .5rem;
	}
}

@media screen and (max-width:1024px) {
	.main-nav-item a {
		font-size: .6rem;
		margin: 0;
	}
}

@media screen and (max-width:640px) {
	.main-nav-item a {
		font-size: 1.2rem;
	}
	.identity-element img {
		margin: 0;
	}
	
	body {
		margin: 0;
	}
		
}