/*

WEB COLORS

Black Color
#403540

White Color
#f7f6f4

Purple Color
rgba(124, 107, 167, 1)
#7c6ba7

Aqua Color

#37e1d1

*/

/* Fonts */

/*@font-face {
	font-family: 'Montserrat';
	font-weight: 400, normal;
	font-style: italic;
	font-display: block;
	src: url('fonts/Montserrat-Italic.ttf');
}*/

@font-face {
	font-family: 'Montserrat';
	font-weight: 300;
	font-display: swap;
	src: url('fonts/Montserrat-Light.ttf');
}

@font-face {
	font-family: 'Montserrat';
	font-weight: 400, normal;
	font-display: swap;
	src: url('fonts/Montserrat-Regular.ttf');
}

@font-face {
	font-family: 'Montserrat';
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url('fonts/Montserrat-Italic.ttf');
}

@font-face {
	font-family: 'Montserrat';
	font-weight: 500;
	font-display: swap;
	src: url('fonts/Montserrat-Medium.ttf');
}


@font-face {
	font-family: 'Montserrat';
	font-weight: 500;
	font-style: italic;
	font-display: swap;
	src: url('fonts/Montserrat-MediumItalic.ttf');
}
/*
@font-face {
	font-family: 'Montserrat';
	font-weight: 800;
	font-display: swap;
	src: url('fonts/Montserrat-ExtraBold.ttf');
}
*/

@font-face {
	font-family: 'Montserrat';
	font-weight: 900;
	font-display: swap;
	src: url('fonts/Montserrat-Black.ttf');
}

@font-face {
	font-family: 'Montserrat';
	font-weight: 900;
	font-style: italic;
	font-display: swap;
	src: url('fonts/Montserrat-BlackItalic.ttf');
}

@font-face {
	font-family: 'z-mark';
	font-weight: 300;
	font-display: swap;
	src: url('fonts/z-mark.ttf');
}

/* Write Text */

@keyframes blinkCursor {
	0% {
		opacity: 1;
	}
	49% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#cursor {
	color: #37e1d1 !important;
	animation: blinkCursor 750ms infinite;
	pointer-events: none;
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.color_pri #cursor {
	color: #403540 !important;
}

/* Basic Elements */

html, body {
	margin: 0;
	width: 100%;
	min-height: 100%;
	background: #f7f6f4;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 30px;
	font-weight: 400;
	color: #403540;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #37e1d1;
	text-decoration: none;
/*	text-shadow: 0 0 .5px #888888; */
	border: none;
}

a:hover {
	color: #ffffff;
/*	transition: color 500ms;
	-webkit-transition: color 500ms;
	-moz-transition: color 500ms; */
}

a img {
}

a img:hover {
/* 	opacity: 0.7; */
}

h1 {
	margin: 50px auto 25px auto;
	font-size: 40px;
	line-height: 45px;
	font-weight: 900;
	text-transform: uppercase;
}

h2 {
	margin: 25px auto 50px auto;
	font-size: 24px;
	line-height: 36px;
	font-weight: 900;
}

h3 {
	margin: 80px auto 40px auto;
	font-size: 24px;
	line-height: 36px;
	font-weight: 900;
}

h4 {
	margin: 50px auto;
	font-size: 18px;
	line-height: 48px;
	font-weight: 600;
}

p {
	font-size: 16px;
	line-height: 38px;
}

ol li {
	font-size: 18px;
	line-height: 42px;
}


/* HEADER & NAV */

.wrapper {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
}

header {
	margin: 0 auto;
	padding: 0;
	width: 100%;
/* 	max-width: 1500px;
	 */	height: auto;
	text-align: center;
	position: fixed;
	z-index: 999;
	left: 50%;
	transform: translateX(-50%);
}

.header_buffer {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 72px;
/* 	display: none; */
}

.z_logo, .z_desc {
	margin: 0 0 0 12px;
	padding: 27px 0 27px 15px;
	font-size: 16px;
	line-height: 18px;
	display: inline-block;
}

.z_logo {
	letter-spacing: .5px;
	position: absolute;
	left: 0;
}

.z_logo .logo {
	margin: 0;
	padding: 18px 0;
	height: 36px;
	width: auto;
	position: absolute;
	top: 0;
}

a.z_logo {
	color: #403540;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-o-transition: ease opacity 300ms;
	-webkit-transition: ease opacity 300ms;
	-moz-transition: ease opacity 300ms;
	transition: ease opacity 300ms;
}

a.z_logo:hover {
	color: #403540;
	opacity: 0.65;
	position: absolute;
	left: 0;
}

.z_name {
	margin-left: 48px;
	position: relative;
}

.z_desc {
	padding-left: 0;
	margin: 0 auto;
	text-align: center;
}

.nav {
	margin: 0 15px 0 0;
	padding: 15px 0 15px 0;
	line-height: 0;
	position: absolute;
	right: 0;
	border: 0px solid #f7f6f4;
	display: inline-block;
	-ms-transition: ease all 300ms;
	-o-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	transition: ease all 300ms;
}

.nav ul {
	position: relative;
	z-index: 2;
}

.nav ul, .mobile_nav_screen ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 0;
}

.nav li {
	padding: 0 0 0 10px;
}

.nav li, .nav li a, .mobile_nav_screen li, .mobile_nav_screen li a {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	text-align: right;
	line-height: 18px;
}

.nav li a, .mobile_nav_screen li a {
	padding: 10px 20px 10px 20px;
	color: #403540;
	letter-spacing: .5px;
	display: inline-block;
}

.nav_icon {
	margin-left: 6px;
	font-size: 18px;
	color: #37e1d1;
	display: inline-block;
}

.nav_icon .top, .nav_icon .middle, .nav_icon .bottom {
	padding: 0;
	margin: 3px 0;
	width: 14px;
	height: 2px;
	background: #37e1d1;
	display: block;
}

.nav_icon .bottom {
	margin-bottom: 0;
}

.nav ul li {
	display: none;
	opacity: 0;
	-ms-transition: ease all 300ms;
	-o-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	transition: ease all 300ms;
}

.nav_icon {
	opacity: 0;
}

.nav .menu a, .mobile_nav_screen .menu a {
	font-weight: 900;
	color: #f7f6f4 !important;
	letter-spacing: 1px;
	cursor: default;
}

.nav.desktop:hover {
	/* padding-bottom: 5px; */
 	background: #37e1d1;
}

.nav_background {
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	display: none;
	background: #37e1d1;
	-o-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	transition: ease all 300ms;
}

.nav.desktop:hover .nav_icon .top, .nav.desktop:hover .nav_icon .middle, .nav.desktop:hover .nav_icon .bottom {
	background: #f7f6f4;
}

.nav.desktop:hover ul li {
	display: block;
	opacity: 1;
}

.nav.desktop:hover li a {
	color: #403540 !important;
}

.nav.desktop li a:hover {
	color: #f7f6f4 !important;
	-o-transition: ease color 300ms;
	-webkit-transition: ease color 300ms;
	-moz-transition: ease color 300ms;
	transition: ease color 300ms;
}

.nav.desktop:hover li.menu a {
	color: #f7f6f4 !important;
}

.mobile_nav_screen {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	background: #37e1d1;
	background: rgba(55, 225, 209, .98);
	box-sizing: border-box;
	position: fixed;
	right: 0;
	z-index: 1000;
	display: none;
	opacity: 0;
	transform: translate(100%, 0);
	-ms-transition: ease all 300ms;
	-o-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	transition: ease all 300ms;
}

.mobile_nav_screen ul.nav_buttons {
	padding-top: 40px;
}

.mobile_nav_screen li a{
	color: #403540;
}

.mobile_nav_screen .mobile_nav_z_logo img {
	margin: 0 auto;
	padding: 0;
	width: 20%;
	display: block;
}

.mobile_nav_screen .social_links {
	margin-top: 20px;
}

.mobile_nav_screen .social_links a {
	margin: 0;
	padding: 10px;
	display: inline-block;
}

.close_mobile_nav {
	margin: 40px auto 0 auto !important;
	display: block;
/* 	position: absolute;
	left: 0;
	right: 0;
	bottom: 25%; */
}

.close_mobile_nav a {
	padding: 20px;
}

.close_icon {
	margin: 0 auto;
	padding: 0;
	height: 80px;
	height: 80px;
}

.close_icon .top, .close_icon .bottom {
	margin: 3px 0;
    width: 14px;
    height: 2px !important;
	background: #f7f6f4;
	height: 2px !important;
    display: block;
    position: absolute;
}

.close_icon .top {
    transform: translate(0, 0) rotate(45deg) scale(2.25, 1);
}

.close_icon .bottom {
    transform: translate(0, 0) rotate(-45deg) scale(2.25, 1);
}

footer {
	margin: 0 auto;
	padding: 20px 0;
	width: 100%;
	background: #f7f6f4;
	position: relative;
	z-index: 10;
}

footer p {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
}

/* SINGLES */

.extra_bold {
	font-weight: 900;
}

.bold {
	font-weight: 600;
}

.medium {
	font-weight: 500;
}

.regular {
	font-weight: 400;
}

.light {
	font-weight: 300;
}

.all_caps {
	text-transform: uppercase;
}

.inline_block {
	display: inline-block;
}

.clear_fix:after {
	content: "";
	display: table;
	clear: both;
}

.width_25 {
	margin: 0;
	padding: 0;
	width: 25%;
}

.width_33 {
	margin: 0 1%;
	padding: 0;
	width: 31.333333%;
}

.width_50 {
	margin: 0%;
	padding: 0;
	width: 50%;
}

.width_90 {
	width: 90%;
}

.width_100 {
	width: 100%;
}

.height_100vh {
	height: 100vh;
}

.height_100 {
	height: 100%;
}

.overflow_hidden {
	overflow: hidden;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.position_absolute {
	position: absolute;
}

.position_fixed {
	position: fixed;
	z-index: 1;
}

.background_purple {
	background: #7c6ba7;
}

.background_aqua {
	background: #37e1d1;	
}

.background_black {
	background: #403540;
}

.background_grey {
	background: #f7f6f4;
}

.background_white {
	background: #ffffff;
}

.mobile {
	display: none !important;
}

.no_wrap {
	white-space: nowrap;
}

.margin_top_0 {
	margin-top: 0 !important;
}

.padding_0 {
	padding: 0 !important;
}

.padding_top_0 {
	padding-top: 0 !important;
}

.padding_bottom_0 {
	padding-bottom: 0 !important;
}

.display_inlineblock {
	display: inline-block;
}

.margin_shift_up {
	margin-top: -100%;
}

.sans-serif {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

.align_center {
	text-align: center;
}

.mobile_block, .mobile_inline, .mobile_inlineblock {
	display: none !important;
}

.full_background_video {
	width: 100%;
	height: auto;
}

.pointer_events_none {
	pointer-events: none;
}

.cta_container {
	margin: 50px 0;
	padding: 0;
	width: 100%;
	text-align: center;
}

a.cta_button {
	margin: 0 auto;
	padding: 20px;
	font-size: 24px;
	font-weight: 900;
	color: #f7f6f4;
	background: #37e1d1;
	letter-spacing: .5px;
	display: inline-block;
	-ms-transition: ease all 300ms;
	-o-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	transition: ease all 300ms;
}

a.cta_button:hover {
	color: #37e1d1;
/* 	background: rgba(53, 225, 208, 0.8); */
	background: #403540;
}

a.cta_button.alt_1 {
	color: #f7f6f4;
	background: #403540;
}

a.cta_button.alt_1:hover {
	color: #37e1d1;
	background: #f7f6f4;
}

.bio .social img {
	width: 32px;
}

.bio .social a {
	margin: 0 10px;
	display: inline-block;
	-ms-transition: ease all 300ms;
	-o-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	transition: ease all 300ms;
}

.nav .social_links a {
	margin: 0;
	display: inline-block;
	-ms-transition: ease all 300ms;
	-o-transition: ease all 300ms;
	-moz-transition: ease all 300ms;
	-webkit-transition: ease all 300ms;
	transition: ease all 300ms;
}

.bio .social a:hover, .nav .social_links a:hover {
	opacity: .5;
}

.nav li.social_links {
	padding-top: 5px;
}

.nav .social_links img {
	width: 24px;
}

.nav .social_links a {
	padding: 7px;
}

.nav .social_wrap {
	padding: 10px;
}

.write_move {
	transition: ease width 300ms;
}

@-webkit-keyframes arrowBounce {
	0% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
	50% {
		opacity: 1;
		transform: translate(0px, 30px);
	}
	100% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
}

@-o-keyframes arrowBounce {
	0% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
	50% {
		opacity: 1;
		transform: translate(0px, 30px);
	}
	100% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
}

@-moz-keyframes arrowBounce {
	0% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
	50% {
		opacity: 1;
		transform: translate(0px, 30px);
	}
	100% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
}

@keyframes arrowBounce {
	0% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
	50% {
		opacity: 1;
		transform: translate(0px, 30px);
	}
	100% {
		opacity: 0;
		transform: translate(0px, 0px);
	}
}

.arrow_an {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	display: block;
	-webkit-animation: arrowBounce 1.7s ease infinite; /* Safari 4+ */
	-moz-animation:    arrowBounce 1.7s ease infinite; /* Fx 5+ */
	-o-animation:      arrowBounce 1.7s ease infinite; /* Opera 12+ */
	animation:         arrowBounce 1.7s ease infinite; /* IE 10+, Fx 29+ */
}

.down_arrow {
	margin: 0 auto;
	padding: 5px;
	border: solid #403540;
	border-width: 0 5px 5px 0;
	display: inline-block;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

@-webkit-keyframes shakeIt {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(10px, 0px);
	}
	40% {
		transform: translate(0px, 0px);
	}
	60% {
		transform: translate(-10px, 0px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@-o-keyframes shakeIt {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(10px, 0px);
	}
	40% {
		transform: translate(0px, 0px);
	}
	60% {
		transform: translate(-10px, 0px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@-moz-keyframes shakeIt {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(10px, 0px);
	}
	40% {
		transform: translate(0px, 0px);
	}
	60% {
		transform: translate(-10px, 0px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes shakeIt {
	0% {
		transform: translate(0px, 0px);
	}
	20% {
		transform: translate(10px, 0px);
	}
	40% {
		transform: translate(0px, 0px);
	}
	60% {
		transform: translate(-10px, 0px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}


@media only screen and (min-device-width: 701px), only screen and (min-width: 701px) {

	html.design_page li.design, html.about_page li.about, html.writing_page li.writing {
		color: #403540;
		display: block;
		opacity: 1;
	}

	html.design_page li.design a, html.about_page li.about a, html.writing_page li.writing a {
		color: #403540;
	}

	html.design_page li.design .nav_icon, html.about_page li.about .nav_icon, html.writing_page li.writing .nav_icon {
		opacity: 1;
	}
	
	.mobile_block.current_page {
		display: none;
	}
}

@media only screen and (max-device-width: 700px), only screen and (max-width: 700px) {

	/* Mobile Nav */
	
	.mobile_block.current_page {
		opacity: 1;
	}
	
	.mobile_block.current_page .nav_icon {
		opacity: 1;
	}
	
	.indicator {
		display: none;
	}
	
	.mobile_nav_screen {
/*
		margin: 0;
		padding: 0;
		width: 50%;
		height: 100vh;
		background: #37e1d1;
		box-sizing: border-box;
		position: fixed;
		right: 0;
		z-index: 1000;
*/
	}
	
	.mobile_nav_screen li {
		padding: 5px 0;
		text-align: center;
		display: block;
		opacity: 1;
	}

	.mobile_nav_screen li a {
		font-size: 24px;
		text-align: center;
	}
	
	.mobile_nav_screen.open {
		transform: translate(0px, 0px);
		display: block;
		opacity: 1;
	}
	
	.mobile_nav_screen li.menu {
		margin: 20px 0;
	}
	
	.design_page .indicator.design_ind, .about_page .indicator.about_ind, .writing_page .indicator.writing_ind {
		display: inline;
	}
	
	.design_page .mobile_nav_screen li.design a, .about_page .mobile_nav_screen li.about a, .photo_page .mobile_nav_screen li.photo a, .shop_page .mobile_nav_screen li.shop a, .writing_page .mobile_nav_screen li.writing a {
		font-style: italic;
		opacity: .8;
		-webkit-animation: shakeIt .75s linear 1; /* Safari 4+ */
		-moz-animation:    shakeIt .75s linear 1; /* Fx 5+ */
		-o-animation:      shakeIt .75s linear 1; /* Opera 12+ */
		animation:         shakeIt .75s linear 1; /* IE 10+, Fx 29+ */
	}

	/* Basic Elements */

	.mobile_block {
		display: block !important;
	}

	.mobile_inline {
		display: inline !important;
	}
	
	.mobile_inlineblock {
		display: inline-block !important;
	}
	
	.mobile_display_none {
		display: none !important;
	}
	
	.close {
/* 		display: none !important; */
	}

	.wrapper {
		width: 100%;
	}
	
	header {
		width: 100%;
		left: 0;
		transform: none;
	}
	
	.z_logo {
		margin-left: 0;
	}
	
	.nav {
		margin-right: 0;
	}
	
/* 	.nav:hover {
		padding: 17px 0 0 0;
		top: 0;
	}
	
	.nav:hover ul li {
		padding: 0;
	}
	
	.nav:hover ul li a {
		padding: 10px 20px;
		min-width: 30vw;
	}
	
	.nav:hover .close {
		display: block !important;
	}
 */	
	h1 {
		font-size: 40px;
		line-height: 58px;
	}
	
	h2 {
		font-size: 24px;
		line-height: 46px;
	}
	
	h3 {
		font-size: 24px;
		line-height: 46px;
	}
	
	a.cta_button {
		font-size: 20px;
	}
	
	p {
		font-size: 17px;
		line-height: 38px;
	}
	
	footer p {
		font-size: 12px;
	}
	
	.mobile_float_none {
		float: none;
	}
	
	.mobile_width_100 {
		width: 100%;
	}

	.bio .social img, .mobile_nav_screen .social_links img {
		width: 42px;
	}
	
	.bio .social a {
		margin: 0 15px;
	}

}
/*@media (min-aspect-ratio: 4/3) {
	.full_background_video {
		width: 100%;
		height: auto;
	}
}*/
@media (orientation: portrait) {
	.full_background_video {
		width: auto;
		height: 100%;
	}

	.vert_background {
		display: none !important;
	}

	.horiz_background {
		display: block !important;
	}
}
@media (max-aspect-ratio: 4/3) {
	.full_background_video.four_three {
		width: auto;
		height: 100%;
		right: 0;
		position: absolute;
	}

	.vert_background {
		display: block !important;
	}

	.horiz_background {
		display: none !important;
	}
}