/*
Theme name: Brand Guidelines
Description: Custom Theme
*/

/*/////GLOBAL/////*/

html,body {
    overflow-x: hidden;
}

body, input::placeholder {
	padding: 0;
	margin: 0;
    position:relative;
	font-family: nimbus-sans-extended, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
}

ul {
	padding-inline-start: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
	margin-block-start: 0;
	margin-block-end: 0;
	font-style: normal;
}

h1, h2, h3 {
	font-family: eurostile-extended, sans-serif;
	font-style: normal;
	font-size: 96px;
	line-height: 1.1;
	letter-spacing: -.05rem;
	font-weight: 900;
	margin-block-start: .25em;
	margin-block-end: .25em;
	color: #090444;
}

h3 {
	font-size: 48px;
	line-height: 1;
}

h4, h5 {
	font-family: nimbus-sans-extended, sans-serif;
	font-weight: 700;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.4em;
	margin-block-start: .75em;
	margin-block-end: .75em;
	text-transform: uppercase;
	color: #AD7912;
}

h5 {
	color: #60789C;
}

p {
	font-weight: 400;
	font-size: 24px;
	max-width: 850px;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

a {
	color: #AD7912;
}

.text-align-center p {
	margin: 0 auto;
}

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

a {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

a:hover {
	text-decoration: underline;
}

.home-logo img {
	max-width: 442px;
	max-height: 73px;
}

.main, footer {
	position: relative;
	z-index: 1;
}

/*GLOBAL COLORS*/

section.night_skies, footer.night_skies, .night_skies {
	background-color: #05193A;
}

section.evergreen, footer.evergreen, .evergreen {
	background-color: #013635;
}

section.night_skies p, section.evergreen p, footer.night_skies p, footer.evergreen p, .night_skies p, .evergreen p {
	color: #E6E6E4;
}

section.neutral_paint, footer.neutral_paint, .neutral_paint {
	background-color: #E6E6E4;
}

section.neutral_paint p, footer.neutral_paint p, .neutral_paint p {
	color: #222222;
}

/*SECTIONS*/

button.hamburger-shell {
	padding: 71px 0;
}

.intro {
	background-image: url('https://z3-brand.tiltedchair.co/wp-content/themes/brand-guide/resources/images/intro-background.png');
	background-repeat: no-repeat;
	background-size: cover;
	height: 1500px;
}

.center-content img {
	padding: 10% 0;
	max-width: 580px;
}

footer img {
	max-width: 200px;
}

.brand-elements .grid-parent .grid-66 {
	padding-left: 120px;
}

.brand-elements .grid-parent .grid-33 {
	padding-right: 120px;
}

.brand-elements .grid-parent {
	border-right: 3px solid #60789C;
}

.brand-elements .grid-parent .grid-100 {
	border-top: 3px solid #60789C;
	padding-right: 120px;
}

.brand-elements-right {
	padding-left: 60px;
	padding-right: 60px;
}

.brand-elements-arrow img {
	max-width: 216px;
}

.brand-elements-bottom-left img {
	max-width: 620px;
}

.colors .grid-33 li {
	min-height: 276px;
}

.colors .grid-25 li {
	min-height: 200px;
}

.fonts .grid-70 h2 {
	font-size: 60px;
}

.fonts .grid-70 h4 {
	font-size: 60px;
	color: #05193A;
	letter-spacing: 0;
}

.fonts .grid-70 p {
	font-size: 32px;
	color: #05193A;
}

.main .fonts .grid-parent {
	border-bottom: 3px solid #60789C;
}

.main .fonts:last-child .grid-parent {
	border-bottom: none;
}

footer a {
	color: #E6E6E4;
}

@media screen and (min-width: 768px) {
	
	nav li {
		padding: 0 18px;
	}
	
	/* MENU */
	
	.hamburger-shell {
  		margin: 0;
   		position: fixed;
    	width: 100%;
   		height: 80px;
    	overflow: auto;
    	top: 0;
    	right: 0;
   		cursor: pointer;
    	padding: 0;
    	background: #E6E6E4;
    	z-index: 100;
		border: none;
	}

	.top, .middle{
  		position: absolute;
  		width: 50px;
  		height: 3px;
  		background-color: #05193A;
  		transition: all 350ms ease-in-out;
  		top: 64px;
		right: 22px;
	}

	.middle {
  		top: 76px;
	}

	#menu {
  		position: fixed;
  		top: 142px;
  		text-decoration: none;
  		font-weight: 100;
  		font-size: 24px;
  		padding: 12px 24px;
  		width: 210px;
		background-color: #05193A;
  		text-align: right;
		right: 0%;
  		z-index: 70;
		display: none;
	}
	
	#menu .open{
		display: block;
	}

	#menu li {
  		text-decoration: none!important;
  		list-style: none;
  		color: #E6E6E4;
  		transition: all 150ms ease;
		padding: 2%;
	}

	#menu li:hover {
  		color: #056CF2;
	}
	
	.sub-menu li a:hover {
		color: #000000!important;
	}

	#menu a {
  		text-decoration: none;
  		color: #E6E6E4;
  		font-family: nimbus-sans-extended, sans-serif;
  		font-weight: 400;
  		font-size: 24px;
	}
	
	.sub-menu li a {
		font-size: 17px!important;
	}

	.menu-open .top {
  		transform: rotate(225deg);
  		-webkit-transform: rotate(225deg);
  		top: 70px;
  		background-color: #AD7912;
  		height: 2px;
	}

	.menu-open .middle {
  		transform: rotate(-225deg);
  		-webkit-transform: rotate(-225deg);
  		top: 70px;
  		background-color: #AD7912;
  		height: 2px;
	}

	.menu-name {
  		font-weight: 900;
  		color: #4A4E10;
  		font-size: 16.3px;
  		text-decoration: none;
  		position: absolute;
  		top: 40px;
  		left: -1px;
  		transition: all 350ms;
	}

	.menu-open .menu-name {
  		top: 64px;
  		color: #fffbfa;
	}
	
}

@media screen and (max-width: 1400px) {
	
	/*SECTIONS*/
	
	.brand-elements .grid-parent .grid-66 {
		padding-left: 100px;
	}

	.brand-elements .grid-parent .grid-33 {
		padding-right: 100px;
	}
	
}

@media screen and (max-width: 1024px) {
	
	h1, h2 {
		font-size: 48px;
	}
	
	h3 {
		font-size: 36px;
	}
	
	/*SECTIONS*/
	
	.brand-elements .grid-parent .grid-66 {
		padding-left: 80px;
	}

	.brand-elements .grid-parent .grid-33 {
		padding-right: 80px;
	}
	
}

@media screen and (max-width: 767px) {
	
	h1, h2 {
		font-size: 32px;
	}
	
	h3 {
		font-size: 28px;
	}
	
	h4, h5 {
		font-size: 20px;
	}
	
	p {
		font-size: 20px;
	}
	
	/*SECTIONS*/
	
	.brand-elements .grid-parent .grid-66 {
		padding-left: 22px;
	}

	.brand-elements .grid-parent .grid-33 {
		padding-right: 22px;
	}

	.brand-elements .grid-parent {
		border-right: none;
	}

	.brand-elements .grid-parent .grid-100 {
		border-top: 3px solid #60789C;
		padding-right: 22px;
		border-bottom: 3px solid #60789C;
	}

	.brand-elements-right {
		padding-left: 22px;
		padding-right: 22px;
	}
	
}