*, body, main, div, img {
	margin: 0;
	padding: 0;
}

body {
	background-color: #ffffff;
	color: #0d0d0d;
	font-family: 'GoodSansThin', sans-serif;
	font-weight: normal;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media (max-width: 1119px) {
	body {
		font-family: 'GoodSansLight', sans-serif;
	}
}

main {
	overflow-x: hidden;
	-webkit-animation: fadein 2s;
	-moz-animation: fadein 2s;
	-ms-animation: fadein 2s;
	-o-animation: fadein 2s;
	animation: fadein 2s;
	position: relative;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

h1, address {
	padding-left: 0px !important;
	padding-right: 0px !important;
	display: block;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	position: absolute;
	width: 100%;
}

h1 {
	top: 0;
}

address {
	position: fixed;
	bottom: 0;
}

main #content {
	margin: 20%;
	overflow: visible;
}

main #content p {
	text-align: justify;
}

img {
	width: 1px;
	height: 1px;
	position: fixed;
	top: -100px;
	left: -100px;
}

a, a:link, a:visited {
	color: #0d0d0d;
	text-decoration: none;
	border-bottom: 2px solid #0d0d0d;
	padding-bottom: .04em;
}

a:hover, a:active {
	cursor: pointer;
	color: #ccc;
	border-bottom: 2px solid #ccc;
}

@media (max-width: 1280px) {
	a, a:link, a:visited {
		border-bottom: 1px solid #0d0d0d;
	}
	a:hover, a:active {
	border-bottom: 2px solid #ccc;
	}
}

.example {
	cursor: help;
	box-sizing: border-box;
	position: relative;
	background: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	border: 1px solid #ccc;
	padding: .16em .24em .16em .24em;
	white-space: nowrap;
	z-index: 10;
}

.example:hover, .example:focus {
	color: #0d0d0d;
	z-index: 20;
	border-color: #0d0d0d;
}

.example::after {
	content: "";
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center;
	transition: 160ms ease-out opacity;
}

.example:hover::after {
	opacity: 1;
	transition: 260ms ease-in opacity;
}

.example#this-also::after {
	background-image: url("../img/this-also.jpg");
	background-size: cover;
}

.example#creatability::after {
	background-image: url("../img/creatability.jpg");
	background-size: cover;
}

.example#google-identity::after {
	background-image: url("../img/google-identity.gif");
	background-size: 50%;
}

.example#google-assistant-logo::after {
	background-image: url("../img/google-assistant-logo.gif");
	background-size: 40%;
}

.example#ooo-app::after {
	background-image: url("../img/ooo-app.jpg");
	background-size: cover;
}

.example#real-nyc::after {
	background-image: url("../img/real-nyc.jpg");
	background-size: cover;
}

.example#swag::after {
	background-image: url("../img/swag.jpg");
	background-size: cover;
}

.example#hbo::after {
	background-image: url("../img/hbo.jpg");
	background-size: cover;
}

.example#mtv::after {
	background-image: url("../img/mtv.jpg");
	background-size: cover;
}

.example#antelope-effects::after {
	background-image: url("../img/antelope-effects.jpg");
	background-size: cover;
}

.oval {
	background: #0d0d0d;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 50% 50%;
	-webkit-border-radius: 50% 50%;
	border-radius: 50% 50%;
	padding: .21em 1em .21em 1em;
	white-space: pre;
}

/* Oh boy */

@media (min-width: 0px) and (max-width: 399px) {
	main #content { margin: 84px 28px 84px 28px !important; }
	h1, address {
		     font-size:   16px;
			 line-height: 16px;         padding:     28px; }
	main p { font-size:   16px;         line-height: 28px; }
	main #content p:not(:first-child) { text-indent: 28px; }
}

@media (min-width: 400px) and (max-width: 559px) {
	main #content { margin: 96px 32px 96px 32px !important; }
	h1, address {
			 font-size:   18px;
			 line-height: 18px;         padding:     32px; }
	main p { font-size:   18px;         line-height: 32px; }
	main #content p:not(:first-child) { text-indent: 32px; }
}

@media (min-width: 560px) and (max-width: 799px) {
	h1, address {
			 font-size:   22px;
			 line-height: 22px;	        padding:     36px; }
	main p { font-size:   22px;	        line-height: 36px; }
	main #content p:not(:first-child) { text-indent: 36px; }
}

@media (min-width: 800px) and (max-width: 959px) {
	h1, address {
			 font-size:   24px;
			 line-height: 24px;         padding:     40px; }
	main p { font-size:   24px;         line-height: 40px; }
	main #content p:not(:first-child) { text-indent: 40px; }
}

@media (min-width: 960px) and (max-width: 1119px) {
	h1, address {
			 font-size:   26px;
			 line-height: 26px;         padding:     44px; }
	main p { font-size:   26px;         line-height: 44px; }
	main #content p:not(:first-child) { text-indent: 44px; }
}

@media (min-width: 1120px) and (max-width: 1279px) {
	h1, address {
			 font-size:   28px;
			 line-height: 28px;         padding:     48px; }
	main p { font-size:   28px;         line-height: 48px; }
	main #content p:not(:first-child) { text-indent: 48px; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
	h1, address {
			 font-size:   32px;
			 line-height: 32px;         padding:     52px; }
	main p { font-size:   32px;         line-height: 52px; }
	main #content p:not(:first-child) { text-indent: 52px; }
}

@media (min-width: 1440px) and (max-width: 1599px) {
	h1, address {
			 font-size:   34px;
			 line-height: 34px;         padding:     56px; }
	main p { font-size:   34px;         line-height: 56px; }
	main #content p:not(:first-child) { text-indent: 56px; }
}

@media (min-width: 1600px) and (max-width: 1759px) {
	h1, address {
			 font-size:   36px;
			 line-height: 36px;			padding:     60px; }
	main p { font-size:   36px;         line-height: 60px; }
	main #content p:not(:first-child) { text-indent: 60px; }
}

@media (min-width: 1760px) and (max-width: 1919px) {
	h1, address {
			 font-size:   38px;
			 line-height: 38px;         padding:     64px; }
	main p { font-size:   38px;         line-height: 64px; }
	main #content p:not(:first-child) { text-indent: 64px; }
}

@media (min-width: 1920px) and (max-width: 2079px) {
	h1, address {
			 font-size:   42px;
			 line-height: 42px;         padding:     68px; }
	main p { font-size:   42px;         line-height: 68px; }
	main #content p:not(:first-child) { text-indent: 68px; }
}

@media (min-width: 2080px) and (max-width: 2239px) {
	h1, address {
			 font-size:   44px;
			 line-height: 44px;         padding:     72px; }
	main p { font-size:   44px;         line-height: 72px; }
	main #content p:not(:first-child) { text-indent: 72px; }
}

@media (min-width: 2240px) and (max-width: 2399px) {
	h1, address {
			 font-size:   46px;
			 line-height: 46px;         padding:     76px; }
	main p { font-size:   46px;         line-height: 76px; }
	main #content p:not(:first-child) { text-indent: 76px; }
}

@media (min-width: 2400px) and (max-width: 2559px) {
	h1, address {
			 font-size:   48px;
		     line-height: 48px;         padding:     80px; }
	main p { font-size:   48px;         line-height: 80px; }
	main #content p:not(:first-child) { text-indent: 80px; }
}

@media (min-width: 2560px) {
	h1, address {
			 font-size:   50px;
		     line-height: 50px;         padding:     84px; }
	main p { font-size:   50px;         line-height: 84px; }
	main #content p:not(:first-child) { text-indent: 84px; }
}