/* ===== Global ===== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	overflow-x: hidden;
	line-height: 0;
	font-size: 0;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: #141817;
}

button {
	display: inline-block;
	background-color: #c0d0e0;
	border: 1px solid #80b0d0;
	color: #000000;
	padding: 12px 8px;
	line-height: 16px;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	outline: none;
	cursor: pointer;
}


/* ===== Template List ===== */

.template-list {
	text-align: center;
	background-color: #1f2834;
}

.template-list button {
	margin: 16px;
}

.template-list .template {
	display: none;
}

/* ===== Template Preview ===== */

.template-preview {
	padding: 40px;
	width: 930px;
	margin: 0 auto;
}

.template-preview .template {
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
}

.template {
	width: 100%; /* 856 */
	margin: 0;
	padding: 40px 60px 40px 60px;
	position: relative;
	background-color: #2e302f;
}

/* ===== Template Controls ===== */

.template-controls {
	text-align: center;
	background-color: #1f2834;
}

.template-controls button {
	margin: 16px;
}


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

.h-type .h0 {
	font-family: "Surveyor Text A", "Surveyor Text B", serif;
	font-style: normal;
	font-weight: 300;
	color: currentColor;
	letter-spacing: .0083em;
	line-height: .8666em;
	font-size: 5vw;
	text-transform: none;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}

@media screen and (max-width: 1120px) {
	.h-type .h0 {font-size: 56px;}
}

@media screen and (min-width: 1920px) {
	.h-type .h0 {font-size: 96px;}
}

.h-type h1,
.h-type *.h1 {
	font-family: "Surveyor Text A", "Surveyor Text B", serif;
	font-style: normal;
	font-weight: 300;
	color: currentColor;
	letter-spacing: .0083em;
	line-height: .8666em;
	font-size: 64px;
	text-transform: none;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}

.h-type h2,
.h-type *.h2 {
	font-family: "Surveyor Text A", "Surveyor Text B", serif;
	font-style: normal;
	font-weight: 300;
	color: currentColor;
	/*
	letter-spacing: .0111em;
	line-height: .9333em;
	font-size: 48px;
	*/
	letter-spacing: .0083em;
	line-height: 1.05em;
	font-size: 34px;
	text-transform: none;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}

.h-type h3,
.h-type *.h3 {
	font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	color: currentColor;
	letter-spacing: 2.5px;
	line-height: 18px;
	text-transform: uppercase;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}

.h-type h3 + h2,
.h-type *.h3 + *.h2 {
	margin-top: -8px !important;
}

.h-type h3 + h1,
.h-type *.h3 + *.h1 {
	margin-top: -8px !important;
}

.h-type h4,
.h-type *.h4 {
	font-family: "Knockout 49 A", "Knockout 49 B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	color: currentColor;
	letter-spacing: 1.5px;
	line-height: 32px;
	text-transform: uppercase;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}

.h-type h5,
.h-type *.h5 {
	font-family: "Knockout 49 A", "Knockout 49 B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	color: currentColor;
	letter-spacing: 1.5px;
	line-height: 24px;
	text-transform: uppercase;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}

.h-type h6,
.h-type *.h6 {
	font-family: "Surveyor Text A", "Surveyor Text B", serif;
	font-style: normal;
	font-weight: 300;
	color: currentColor;
	letter-spacing: .0111em;
	line-height: 1.15em;
	font-size: 36px;
	text-transform: none;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px 0;
}


.h-type p,
.h-type *.p {
	font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	color: currentColor;
	letter-spacing: 0.15px;
	line-height: 24px;
	text-transform: none;
	display: inline-block;
	width: 100%;
	margin: 0 0 24px 0;
}

.h-type.h-text-small p {
	font-size: 14px;
}

.h-type p small {
	font-size: 12px;
	line-height: 18px;
	display: block;
}

.h-type *:not(p) + p {
	padding-top: 16px;
}

.h-type li {
	font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	color: currentColor;
	letter-spacing: 0.15px;
	line-height: 24px;
	text-transform: none;
	display: inline-block;
	width: 100%;
	margin: 0 0 12px 0;
}

.h-type ul {
	padding-left: 14px;
}

.h-type ul.plain {
	padding: 0;
}

.h-type ul.plain li:before {
	display: none;
}

.h-type ul li:before {
	content: '\2022';
	display: inline-block;
	width: 14px;
	margin-left: -14px;
}

.h-type ol {
	padding-top: 16px;
	padding-left: 32px;
	margin: 0 0 24px 0;
}

.h-type ol li {
	display: list-item;
}

.h-type hr {
	display: inline-block;
	position: relative;
	width: 90px;
	padding: 32px 0;
	border: 0;
	margin: 0;
}

.h-type hr:before {
	position: absolute;
	content: '';
	height: 1px;
	background-color: currentColor;
	width: 100%;
	top: 50%;
	left: 0;
}

.h-type hr.small {
	width: 72px;
	padding: 24px 0;
}

.h-type > *:first-child:not(hr) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.h-type > *:last-child:not(hr) {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

@media screen and (max-width: 1023px) {
	.h-type.block-heading {
		padding-bottom: 0 !important;
	}
}

/* Miscellaneous Typography
---------------------------------------------------------------- */

.page-number {
	font-family: "Knockout 49 A", "Knockout 49 B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	color: #FFFFFF;
	letter-spacing: 0.33px;
	line-height: 32px;
	text-transform: uppercase;
	display: inline-block;
	width: 100%;
	margin: 0;
}

.number {
	font-family: "Knockout 49 A", "Knockout 49 B", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 140px;
	line-height: 140px;
	color: #FFFFFF;
	letter-spacing: 12px;
}

ul {
	padding-left: 1em;
}

.fa {
	text-decoration: none !important;
}


/* Typography Colors
---------------------------------------------------------------- */

/* By default we are assuming all type is on a dark background
 * and is considered "light"
 */

.h-type {
	color: #ffffff;
}

.h-type h2,
.h-type .h2{
	color: #ffffff;
}

a.h-type h2,
a.h-type .h2{
	color: #ffffff;
}

a:hover.h-type h2,
a:hover.h-type .h2{
	color: #ffffff;
}

.h-type h3,
.h-type .h3{
	color: #C0A67A;
}

a.h-type h3,
a.h-type .h3,
a .h-type h3,
a .h-type .h3 {
	color: #C0A67A;
	-webkit-transition: color .25s;
	transition: color .25s;
}

a:hover.h-type h3,
a:hover.h-type .h3,
a:hover .h-type h3,
a:hover .h-type .h3 {
	color: #FADDAB;
}

.h-type h5,
.h-type .h5{
	color: rgba(255,255,255,.85);
}

.h-type h5,
.h-type .h5{
	color: #C0A67A;
}

a.h-type h5,
a.h-type .h5,
a .h-type h5,
a .h-type .h5 {
	color: #C0A67A;
	-webkit-transition: color .25s;
	transition: color .25s;
}

a:hover.h-type h5,
a:hover.h-type .h5,
a:hover .h-type h5,
a:hover .h-type .h5 {
	color: #FADDAB;
}

.h-type hr{
	color: rgba(102,105,109,0.5);
}

.hr-anim hr {
	color: #ECE3B2;
}

.h-type.h-type-dark{
	color: #202020;
}

.h-type.h-type-dark h2,
.h-type.h-type-dark .h2{
	color: #202020;
}

.h-type.h-type-dark h3,
.h-type.h-type-dark .h3{
	color: #989697;
}

.h-type.h-type-dark h5,
.h-type.h-type-dark .h5{
	color: rgba(32,32,32,.85);
}

.h-type.h-type-dark hr{
	color: rgba(102,105,109,0.5);
}


/* Global Elements
---------------------------------------------------------------- */

.container {
	display: flex;
	align-items: center;
	margin: auto;
}

.padded {
	padding: 32px;
}

.shaded {
	box-shadow: 0 0 32px 8px rgba(0, 0, 0, 0.25);
}

.full {
	width: 100%;
}

.half {
	width: 50%;
}

div.square {
	padding-top: 100%;
}

div.wide {
	padding-top: 56.25%;
}

.image {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(255, 255, 255, .75);
	cursor: pointer;
}

.image.none {
	border: 1px dotted #808080;
}

.image.none:before {
	content: '+';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
	font-weight: 600;
}

img{
	width: 100%;
}

img.none{
	width: 100px;
	height: 100px;
	background-color: #2e302f;
	display: inline-block;
}

/* SVG Canvas Rendering
---------------------------------------------------------------- */

svg {
	background-color: #2e302f;
	margin: 0;
	font-size: 0;
	line-height: 0;
	padding: 0;
	/*white-space: pre;*/
}


/* Templates
---------------------------------------------------------------- */

/* Image Text */

.template--image-text{

}

.template--image-text .left-side{
	width: 324px;
}

.template--image-text .right-side{
	width: calc(100% - 324px);
	padding-left: 45px;
}

.template--image-text .right-side .h4{
	text-align: center;
}

.template--image-text .right-side .h3{
	text-align: center;
}

.template--image-text .right-side .p{
	text-align: center;
}

/* Big Headline */

.template--big-headline{

}

.template--big-headline .h-type {
	/* ar: hardcode width to prevent width from shrinking */
	width: 730px;
}

.template--big-headline .h-type > *{
	text-align: center;
}

.template--big-headline-link{

}

.template--big-headline-link .h-type {
	/* ar: hardcode width to prevent width from shrinking */
	width: 730px;
}

.template--big-headline-link .h-type > *{
	text-align: center;
}

/* Big Headline */

.template--subhead{

}

.template--subhead .h-type {
	/* ar: hardcode width to prevent width from shrinking */
	width: 730px;
}

.template--subhead .h-type > *{
	text-align: center;
}

/* Full Image */

.template--full-image{

}

/* Image Text Number Left */

.template--image-text-number-left{

}

.template--image-text-number-left .container{
	position: relative;
}

.template--image-text-number-left .left-side{
	width: 324px;
}

.template--image-text-number-left .right-side{
	width: calc(100% - 324px);
	padding-left: 45px;
}

.template--image-text-number-left .right-side .h4{
	text-align: center;
}

.template--image-text-number-left .right-side .h3{
	text-align: center;
}

.template--image-text-number-left .right-side .p{
	text-align: center;
}


.template--image-text-number-left .number-container{

}

.template--image-text-number-left .portfolio-index{
    left: 324px;
    top: 50%;
    position: absolute;
}

.template--image-text-number-left .portfolio-index .index-wrapper{
    background-color: #2d302f;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-family: "Knockout 49 A","Knockout 49 B",sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    height: 60px;
    left: 50%;
    line-height: 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
}

.template--image-text-number-left .portfolio-index .index-wrapper .index-bg{

}

.template--image-text-number-left .portfolio-index .index-wrapper .index{
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 25%;
}

.template--image-text-number-left .portfolio-index .index-wrapper .rule{
    background-color: #ffffff;
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, 0px);
    width: 40px;
}

.template--image-text-number-left .portfolio-index .index-wrapper .total{
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 75%;
}


/* Image Text Number Right */

.template--image-text-number-right{

}

.template--image-text-number-right .container{
	position: relative;
}

.template--image-text-number-right .left-side{
	width: calc(100% - 324px);
	padding-right: 45px;
}

.template--image-text-number-right .left-side .h4{
	text-align: center;
}

.template--image-text-number-right .left-side .h3{
	text-align: center;
}

.template--image-text-number-right .left-side .p{
	text-align: center;
}

.template--image-text-number-right .right-side{
	width: 324px;
}

.template--image-text-number-right .number-container{

}

.template--image-text-number-right .portfolio-index{
    left: calc(100% - 324px);
    top: 50%;
    position: absolute;
}

.template--image-text-number-right .portfolio-index .index-wrapper{
    background-color: #2d302f;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-family: "Knockout 49 A","Knockout 49 B",sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    height: 60px;
    left: 50%;
    line-height: 24px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
}

.template--image-text-number-right .portfolio-index .index-wrapper .index-bg{

}

.template--image-text-number-right .portfolio-index .index-wrapper .index{
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 25%;
}

.template--image-text-number-right .portfolio-index .index-wrapper .rule{
    background-color: #ffffff;
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, 0px);
    width: 40px;
}

.template--image-text-number-right .portfolio-index .index-wrapper .total{
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 75%;
}

/* Footer With Shadow */

.template--footer {
	padding-top: 130px;
	padding-bottom: 60px;
}

.template--footer:before {
	content: '';
	display: block;
	width: 730px;
	height: 1px;
	position: absolute;
	background-color: #4a4d4e;
	top: 50px;
	left: 60px;
}

.template--footer .h4 {
	text-align: center;
}

.template--footer .p {
	text-align: center;
}

.template--footer .h3 {
	text-align: center;
}

/* Horizontal Rule */

.template--horizontal-rule {
}

.template--horizontal-rule .rule {
	width: 730px;
	height: 1px;
	margin: 10px auto;
	background-color: #4a4d4e;
}