html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn,  img, ins, kbd, q, s, samp,
small, strike,  sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
	}
@font-face {
	font-family: 'relative-bold';
    src: url('http://pieratt.com/2017/test/fonts/relative-bold.woff');
    font-weight: normal;
    font-style: normal;
    }
@font-face {
	font-family: 'relative-book';
    src: url('http://pieratt.com/2017/test/fonts/relative-book.woff');
    font-weight: normal;
    font-style: normal;
	}
body {
	font-family:'relative-book', helvetica-neue, sans-serif;
	font-weight: normal;
	background-color:#fff;
	color:#212121;
	font-size: 14px;
	line-height:1.5em;
	letter-spacing:.01em;
	}

.darkmode {
	background-color:#000;
	color:red;
	}
.container {
	max-width:1777px;
	width:90%;
	margin: 0 7% 200px;
	}

.topright {
	position:absolute;
	top: 58px;
	left:5%;
	text-align:left;
	}
.landscape img {
	width:100%;
	}

.header {
			width:23%;
			float:left;
			margin: 0 20px 0 0;
			padding: 10px 0 0px 0;
		}

.header img {
	width:100%;
	}
.header a {
		border-bottom: 0px solid #ccc;
	}
.header img:hover  {
	margin-top:-3px;
	margin-bottom:3px;
/*	transition:ease-in;
	box-shadow: 10px black;
	box-shadow: 0 30px 20px #ddd;
	border-radius: 7px; */
	}
.header span:hover  {
	margin-top:-3px;
	margin-bottom:3px;
	transition:ease-in;
    /*    	box-shadow: 10px black;
	box-shadow: 0 30px 20px #ddd;
	border-radius: 7px;*/
	}
.essay {
	max-width:700px;
	margin: 0 auto;
	}
.essay_2 {
	max-width:700px;
	margin: 0 auto;
	}
.essay-nav img {
	max-width:100px;
	padding-right:20px;
	}
.essay p {

	line-height:1.45em;
	padding-bottom:20px;
	}

.product {
	width:70%;
	float:left;
	height:950px;
}
.onefourth {
	width:18%;
	float:left;
}
img {

	border-bottom: 0px solid #ccc;
	}

h1 {
	font-family: 'relative-book';
	font-weight: normal;
	color:#212121;


	}
a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid #ccc;
	}
a:hover {
    color:#333;
}

h1 a {
	text-decoration:none;
	border-bottom: 0px;

	}
h2 {



	}
h4 {

	padding: 10px 0;
	text-transform: uppercase;
	letter-spacing: .05em;

	}
h4 a {
	color:#999;
	text-decoration: none;
	}
h4 a:hover {
	color:#333;
	}
.contactbutton_1 {
    background-color:black;
    display:block;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #000;
    color:white;
    text-align:center;
    margin-top:30px
}
.contactbutton_1 a{
    color:white;}

.contactbutton_2 {
    background-color:white;
    display:block;
    padding:20px;
    border-radius:5px;
    border: 1px solid #000;
    color:black;
    text-align:center;
    margin-top:30px
}

p {
	line-height:1.5em;
	}
.strike {
	color:#999;
	text-decoration: none;
	text-decoration: line-through;
	}
.date {
	color:#000;

	padding-right:10px;
	}
.credit {
	color:#aaa;
	padding-right:10px;
	}
.domain {
	color:#ccc;
	}
.description {
	width:45%;
	margin:0 20px 0 0;
	float:left;
	}
.description_right {
		width:45%;
		margin:0 20px 0 0;
		float:right;
		}
.description img {

}
.details {
	float:left;
	width:28%;
	margin-right:5%;
	}
.details a {
	text-decoration: none;
	border: 0px;
	color:#000;
	font-family: 'relative-book';
	font-weight: normal
	}
.details a:hover {
	text-decoration:none;
	border-bottom: 1px solid #ccc;
	}
.footer {

	height:100px;
	display:block;
	margin-top:50px;
	}
.more {
	text-align: center;
	color: #000;
	text-decoration: none;
	background-color: #e7ff00;
	border: 0px;
	border-radius: 5px;
	padding: 5px 50px;

	}
.more:hover {
	background-color: #dbfc21;
	transition:ease-in;
	}
.visit {
    margin: 0 10px 0 0;
    padding: 5px;
    width: 100px;
    text-align: center;
	display:inline;
	color: #000;
	text-decoration: none;
	border-bottom:1px solid #ddd;
    }
.visit:hover {
	background-color: #dedede;
	transition:ease-in;
	}
.soon {
    margin: 0;
    padding: 5px;
    width: 100px;
    text-align: center;
	display:inline;
	color: #000;
	text-decoration: none;
	background-color: #ccc;
	border: 0px;
	color: #999;
	border-radius: 5px;
    }
strong {
	font-family: 'relative-bold';
	}
ul {
	font-family: 'relative-book';
	font-weight: normal
	list-style-image: url('img/check.png');  */
	line-height:2em;
	}
li {
	margin:0 5%;
	padding-left:10px;
	}
ul.types{
	font-family: 'relative-book';
	font-weight: normal
	padding-top:10px;
	margin-left:20px;

	}
ul.types li {
	margin:0;
	padding: 5px 10px 0 0;
	}
li.type_checked {
	color:#000;
	list-style-image: url('img/check-small-2.png');
	}
li.type_unchecked {
	color:#ccc;
	list-style: none;
	}
.type_1 {color:#bbb; }
.type_2 {color:#9d9d9d;}
.type_2 a {color:#9d9d9d;}
.type_3 {color:#555;}
.type_4 {color:blue;}
.type_5 {color:purple;}

/* .type_1 {color:#bbb; }
.type_2 {color:#bbb;}
.type_3 {color:#555;}
.type_4 {color:#222;} */
hr {
	color: #ccc;
	background-color: #dedede;
	border: 0;
	height: 1px;
	margin: 5% 0;

	}
/* ----------------------------- Name Styles ----------------------------- */
.condensed {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	}
.wide {
	font-family: 'Archivo Black', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	padding: 10px 0 0;
	}
.serif {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size:2.25em;
	}

.sv {
	font-family: 'Libre Baskerville', serif;
	font-weight: 400;
	letter-spacing:.25em;
	padding: 10px 0 0;
	}
.heavy {
	font-family: 'relative-bold';
	font-size:2.25em;
	}
/* ----------------------------- 3-Col Grid ----------------------------- */

.hidden {display: none;}
.logo-row img {width:100%;}
.logo {width:100%;}
.logo:hover .visible {display: none;}
.logo:hover .hidden {display: block;}
.essay-nav:hover .visible {display: none;}
.essay-nav:hover .hidden {display: block;}

/* ----------------------------- Col Grid ----------------------------- */
.name-row {
    text-align: left;
	margin: 50px 0 120px ;
	}
.name {
	width:18%;
	float:left;
	margin: 0 20px 0 0;
	padding: 10px 0 0px 0;
	border-top:0px solid #dedede;
	
	height:420px;
	}
.name img {
	width:100%;
	border-radius: 10px;

}
.name:hover {
	
}
.name img:hover {
    /*box-shadow: #000 50px;*/

margin-top:0px;
margin-bottom:0px;
/*box-shadow: 0px 50px 50px 0px #dedede;*/
}
/*box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;*/
.pre-brand {
	width:15%;
	float:left;
	margin: 0 20px 0 0;
	padding: 10px 0 0px 0;
	border-top:0px solid #dedede;
	height:270px;
	}
.pre-brand img {
		width:100%;
		}
.footer_grid img {
	width:12%;
	float:left;
	margin: 0 0px 0 0;
	padding: 0px 0 0px 0;

	}
/* ----------------------------- 1440 ----------------------------- */
@media screen and (max-width: 1440px) {
.logo {width:100%; float:left;}
.name {
	width:17%;
	height:400px;
	transition:ease;

	}
	.pre-brand {
		width:17%;
		height:270px;
		transition:ease;

		}}
/* ----------------------------- 1024 ----------------------------- */
@media screen and (max-width: 1024px) {
.logo {width:100%; float:left;}
.name {
	width:22%;
	height:320px;
	padding: 20px 0 30px 0;
	}
	.pre-brand {
		width:22%;
		height:220px;
		padding: 20px 0 30px 0;
		}}
/* ----------------------------- 768 ----------------------------- */
@media screen and (max-width: 768px) {
.logo {width:100%; float:left;}
.name {
	width:31%;
	margin: 0 2% 0 0;
	height:350px;
	padding: 20px 0 20px 0;
	}
	.pre-brand {
		width:28%;
		float:left;
		margin: 0 4% 0 0;
		padding: 20px 0 20px 0;
		height:150px;
			}
.details {
	float:left;
	width:45%;
	margin-right:5%;
	}
.description {
	width:100%;
	}
.essay {
	width:100%;
	float:none;
	display:block;
	}
.essay_2 {
	width:100%;
	float:none;
	display:block;
	}
.essay p {
	font-size:1.25em;
	line-height:1.25em;
	padding-bottom:20px;
	}
	.product {
			width:90%;
			display:block;
			height:400px;
			float:none;
		}
		.onefourth {
			width:90%;
			display:block;
			float:none;
		}
}
/* ----------------------------- 512px ----------------------------- */
@media screen and (max-width: 512px) {
.logo {width:100%; float:left;}
.name {
	width:31%;
	margin: 0 2% 0 0;
	height:300px;
	padding: 10px 0 10px 0;
	}
.container {
	width:96%;
	margin: 0 3% 200px;
	}
.pre-brand {
	width:28%;
	float:left;
	margin: 0 4% 0 0;
	padding: 10px 0 10px 0;
	height:150px;
		}
.details {
	float:left;
	width:90%;
	margin-right:5%;
	}
.description {
	width:100%;
	}
.product {
		width:90%;
		display:block;
		height:400px;
		float:none;
	}
	.onefourth {
		width:90%;
		display:block;
		float:none;
	}
body {font-size:.85em;}
p {
		line-height:1.3em;
		}
}