@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Roboto+Condensed');
@font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url('fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
     src: local('Material Icons'),
     local('MaterialIcons-Regular'),
          url('fonts/MaterialIcons-Regular.woff2') format('woff2'),
          url('fonts/MaterialIcons-Regular.woff') format('woff'),
          url('fonts/MaterialIcons-Regular.ttf') format('truetype');
}

html {scroll-behavior: smooth;}
body, html {position: relative; overflow-x: hidden; font-size: 16px;}
body {
	background: #FFF;
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
}

a {
	text-decoration: none;
	color: #000;
	transition: all 0.2s ease;
}
a:hover {color: #8E1D1E;}
img, li {transition: all 0.2s ease;}
::selection {background: #FFE5E6; color: #8E1D1E;}
* {
	font-family: sans-serif;
	transition: all 0.3s ease;
}
.clear {clear: both;}
/* h1, h2 {font-family: 'Crimson' !important; color: #000;} */




.material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 1.5em;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;

     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;

     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;

     /* Support for IE. */
     font-feature-settings: 'liga';
}
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 1.125em; }
.material-icons.md-24 { font-size: 1.5em; }
.material-icons.md-36 { font-size: 2.25em; }
.material-icons.md-48 { font-size: 3em; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }



/***

	NAV

***/
#home .header {
	background: #FFF;
	-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,.12);
     box-shadow: 0px 2px 6px 0px rgba(0,0,0,.12);
}
.header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     max-width: 1920px;
     height: 56px;
     z-index: 999999;
}
     .header li a {
          text-decoration: none;
          color: #806667;
          font: 600 14px/22px sans-serif;
          -webkit-transition: color .3s;
          transition: color .3s;
     }
.header, .header-inner {width: 100vw;}
.header, .header-inner, .flex-container {
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     max-width: none;
     /* justify-content: space-between; */
}
.header-inner {
	background: #FFF;
	max-width: 1920px;
	margin: 0;
	position: relative;
	justify-content: flex-start !important;
}

.top-nav, .top, .small-bottom, .bottom {
     display: inline-block;
}
.top-nav ul {
     display: block;
     position: relative;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     max-width: none;
}
.nav-open .top-nav.left {display: block;}
.top-nav.left {
     display: none;
     position: absolute;
     top: -10px;
     padding-top: 10px;
     left: 0;
     width: 80vw;
     height: 110vh;
     background-color: #FFF;
     z-index: 10;
     -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
     box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}
     .top-nav.left::after {
          content: ' ';
          position: absolute;
          top: -10vh;
          left: 80vw;
          width: 50vw;
          height: 110vh;
          background: rgba(0,0,0,0.3);
          z-index: -100;
     }

.top-nav ul {overflow-x: hidden;}
.top-nav ul li a {
     margin: 0 0;
     padding: 12px 16px;
     height: 36px;
     width: 70vw;

     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     max-width: none;
     justify-content: space-between;

     border-bottom: 2px solid transparent;
	font-size: 1rem;
}
     .top-nav ul li.active a {color: #8E1D1E; border-color: #8E1D1E}
     .top-nav ul li a:hover {color: #212121;}
     .top-nav ul li a:active {background-color: #F5F5F5}

header .header-inner .product-name-wrapper {margin-left: 16px;}
header.header .site-logo-link {height: 50px;}
header.header .product-name-wrapper {
     margin-right: -4px;
}
     header.header .product-name-wrapper > div {
          border-left: 1px solid #757575;
          padding-left: 12px;
          margin-left: 12px;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-sizing: content-box;
          box-sizing: content-box;
          justify-content: space-between;
          flex-wrap: nowrap;
     }
/* .header-inner .nav-toggle-button, .header-inner .top-nav .product-name-wrapper {display: block;} */
.flex-container {width: auto; border-bottom: 1px solid #E0E0E0;}
     .flex-container .product-name-wrapper {margin-right: 18px;}
.nav-toggle-button {
     display: inline-flex;
     margin: 12px 0 12px 16px;
     background-color: transparent;
	color: #757575;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     height: 24px;
     min-width: 24px;
     padding: 0;
     -webkit-transition: color .2s;
     transition: color .2s;
     width: 24px;

     border: none;
     text-decoration: none;
     cursor: pointer;
     text-align: center;
     -webkit-appearance: none;
     -moz-appearance: none;
}
	.nav-toggle-button {color: #757575;}
	.nav-toggle-button:hover {color: #000;}
.product-name-wrapper {
     display: -webkit-box;
     display: -ms-flexbox;
     display: inline-flex;
     -webkit-box-flex: 0;
     -ms-flex: 0 0 auto;
     flex: 0 0 ;
     height: 50px;
     margin: 6px 0;
     /* width: 180px; */
}
.site-logo-link {
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
}
.site-logo {
     display: block;
     height: 36px;
}


/***

    MAIN COMPONENTS

***/
/* section, main {text-rendering: optimizeLegibility;} */
h1, p {
	/* Support for all WebKit browsers. */
     /* -webkit-font-smoothing: antialiased; */

     /* Support for Safari and Chrome. */
     /* text-rendering: optimizeLegibility; */

     /* Support for Firefox. */
     /* -moz-osx-font-smoothing: grayscale; */

     /* Support for IE. */
     /* font-feature-settings: 'liga'; */
}
header {color: #2B0607;}
h1 {
	font-size: 4rem;
	line-height: 0.825em;
	margin-bottom: 1rem;
}
p {
	font-size: 1rem;
	line-height: 2em;
	font-weight: 600;
	max-width: 450px;
	width: 100%;
}
.wrapper {
	position: relative;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
}
	.wrapper > section {
		display: block;
		margin: 100px 0;
	}
		.wrapper > section::after {
			content: '';
			display: block;
			clear: both;
		}
		.wrapper > section .image {
			position: relative;
			display: inline-block;
			width: 100%;
			max-height: 250px;
			height: 100%;
			overflow: hidden;
			z-index: -1;
		}
			.wrapper > section .image img {
				position: relative;
				display: block;
				width: 100%;
				margin: 1rem 0;
				clear: both;
			}
		.wrapper > section header, .wrapper > section article {
			position: relative;
			display: block;
			padding: 2vh 2vw;
			margin: 0;
			z-index: 100;
		}
			.wrapper > section header {max-width: 860px; width: calc(100% - 4vw);}
		.wrapper > section article {
			margin: 2rem auto 0;
			text-align: left;
			vertical-align: middle;
		}
			.wrapper > section article h1 {font-size: 2.5rem;}
			.wrapper > section article:nth-child(1n) {background-color: #D04C4D; color: #FFE5E6;}
			.wrapper > section article:nth-child(2n) {background-color: #FFF; color: #2B0607}
		.wrapper > section:nth-child(1n) header {background-color: #FFF;}
		.wrapper > section:nth-child(2n) header {background-color: #D04C4D;}
			.wrapper > section:nth-child(2n) header * {color: #FFE5E6;}

	.grid {
		display: block;
		width: 100%;
		height: auto;
		overflow: scroll;
		white-space: nowrap;
	}
		.grid .row, .grid .row img {
			max-height: 150px;
			height: 100%;
		}
		.grid .row {
			display: block;
			margin: 6px 0;
		}
		.grid .row img {
			display: inline-block;
		}

	.list {}
		.list ul {
			display: block;
			columns: 2;
			-webkit-columns: 2;
			-moz-columns: 2;
		}
			.list ul li {
				display: block;
				font-size: 1.25rem;
				line-height: 1.5em;
				text-align: left;
			}
	.af-grid {
		width: 100%;
		height: auto;
		overflow: hidden;
		white-space: normal;
		text-align: center;
		padding-top: 25px;
	}
		.af-grid a, .af-grid a img {
			max-height: 75px;
			height: 100%;
			filter: grayscale(1);
		}
		.af-grid a:hover {opacity: 0.75}


#contact {
	clear: right;
	padding-bottom: 0px;
}
	#contact header {float: none; margin: 0 auto;}
	#contact header::after {
		content: '';
		display: block;
		clear: both;
	}
	.clist {
		position: relative;
		display: block;
		/* max-width: 800px; */
		width: 100%;
	}
		.clist ul {
			display: block;
		}
			.clist ul li {
				display: grid;
				grid-template-columns: 100px auto;
				grid-gap: 25px;
				margin-bottom: 12px;
				font-size: 1.25rem;
				line-height: 1.5em;
				text-align: left;
			}
				.clist ul li span {font-weight: 600}
				.clist ul li a {color: #D04C4D}
					.clist ul li a:hover {opacity: 0.7}
/***

    SECTION :: MAIN

***/
#home {
	position: relative;
	width: 100%;
	/* max-width: 1440px; */
	height: 100vh;
	overflow: hidden;
}
	#home > img {
          display: none;
          width: 100vw;
          margin-top: -300px;
     }
	#home header {
		position: relative;
		width: 90%;
		height: 100vh;
		margin: 0 auto;
		background: #FFF;
		vertical-align: middle;
	}
		#home header section {
			position: relative;
			display: block;
			max-width: 450px;
			width: 100%;
			margin: 0 auto;
			top: 50%;
			transform: translate(0,-50%);
		}
			#home header section h1 {
				display: block;
				min-width: 500px;
				width: 100vw;
				margin-bottom: 3rem;
				line-height: 0.625em;
			}
			#home header section p {
				margin-bottom: 5rem;
			}
			#home header section button {
				position: relative;
				width: 120px;
				padding: calc(1rem + 50px) 10px 10px;
				border: none;
				border-radius: 3px;
				background-color: #D04C4D;
				color: #FFE5E6;
				font-weight: 600;
				font-size: 1.0875rem;

				display: table-cell;
				vertical-align: bottom;
				text-align: left;
				white-space: nowrap;
			}
				#home header section button:hover {opacity: 0.8}
				#home header section button i {
					position: absolute;
					top: 10px;
					right: 10px;
					font-size: 2rem;
				}


/***

    SECTION :: FOOTER

***/
footer {
	position: relative;
	color: #8E1D1E;
	width: 100%;
	margin-bottom: 50px;

	font-size: 0.75rem;
	font-weight: 600;
}
	footer img {
		display: block;
		width: 120px;
	}


 /***

     SCREEN CHANGES

 ***/
@media only screen and (min-width: 600px) {
     /* For tablets: */
	.header {
          height: 60px;
     }
	.header .header-inner {width: calc(300px + 10vw);}
	.header.long .header-inner {width: 100%;}
     header .header-inner .top.right {margin-right: 32px;}
     /* header.header .site-logo {width: 160px;} */
     .product-name-wrapper {
          height: 50px;
          margin: 6px 0;
          /* width: 160px; */
     }

     #home > img {
          display: block;
          height: 100vh;
          width: auto;
          margin-top: -50px;
     }
	#home header {
		position: absolute;
		left: 0;
		top: 0;
		max-width: 300px;
		padding: 0 5vw;
		width: 90%;
		height: 100vh;
		background: #FFF;
		vertical-align: middle;
	}

	.wrapper {
		overflow: visible;
	}
		.wrapper > section {
			padding-top: 150px;
		}
		.wrapper > section .image {
			max-height: 300px;
			height: 100%;
		}
			.wrapper > section .image img {
				max-height: 300px;
				height: 100%;
				width: auto;
				margin: 0;
			}
			.wrapper > section .image:first-child img {float: none;}
			.wrapper > section .image:last-child img {float: right;}
		.wrapper > section header, .wrapper > section article {
			/* padding: 5vh 5vw; */
			margin: -50px auto;
		}
		.wrapper > section article {
			max-width: 400px;
			/* text-align: center; */
		}
		.wrapper > section article h1 {font-size: 4rem;}

		.wrapper > section:nth-child(1n) header { float: right;}
			.wrapper > section:nth-child(1n) header h1 {text-align: right;}
			.wrapper > section:nth-child(1n) header p {float: right;}
		.wrapper > section:nth-child(2n) header {float: left;}
			.wrapper > section:nth-child(2n) header h1 {text-align: left;}
			.wrapper > section:nth-child(2n) header p {float: left;}

		.grid {
			width: 120vw;
			overflow: hidden;
			transform: translateX(-15%);
		}
			.grid .row, .grid .row img {
				max-height: 300px;
				height: 100%;
			}

		.af-grid {
			width: 100%;
			height: auto;
			overflow: hidden;
			white-space: normal;
			text-align: center;
			padding-top: 100px;
		}
			.af-grid a, .af-grid a img {
				max-height: 100px;
				height: 100%;
			}

	#contact {}
		#contact header {margin-bottom: 100px;}
		.clist ul li {
			grid-template-columns: 100px 400px;
			grid-gap: 100px;
		}


	footer {
		position: fixed;
		bottom: 10vh;
		right: 0vw;
		width: auto;
		color: #8E1D1E;
		transform: translateX(0%) translateY(-100%) rotate(-90deg);

		font-size: 0.75rem;
		font-weight: 600;
	}
		footer img {
			display: block;
			width: 120px;
		}

}

@media only screen and (min-width: 770px) {
     /* For desktop: */
	.header {
		max-width: 1920px;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
	}
	.header .header-inner {width: 800px;}
	.header-inner .nav-toggle-button, .header-inner .top-nav .product-name-wrapper {display: none;}
     header .header-inner .product-name-wrapper {margin-left: 16px;}
     .top-nav.left {display: block; padding-top: 0; margin-left: 24px;}
     .top-nav ul {display: inline-flex;}
     .top-nav ul li a {
          display: inline-block;
          margin: 12px 24px 12px 0;

          padding: 17px 4px;
          /* font-size: 0.815rem; */
          height: auto;
          width: auto;
          background-color: transparent;
     }

     .top-nav.left {
          position: relative;
          height: 100%;
          background-color: transparent;
          -webkit-box-shadow: none;
          box-shadow: none;
          top: 0;
     }

          .top-nav.left::after {
               display: none;
          }


	header h1 {
		font-size: 8rem;
	}
     #home > img {
          width: 100vw;
          height: auto;
          margin-top: -30vh;
     }
	#home header {
		max-width: 800px;
	}
	#home header section h1 {
		display: block;
		width: 1200px;
		margin-bottom: 3rem;
	}
	.wrapper > section header, .wrapper > section article {
		padding: 5vh 5vw;
		margin: -75px auto;
	}
	.wrapper > section header {
		display: block;
		max-width: 860px;
		padding: 20px;
	}
	.wrapper > section article {
		max-width: 500px;
	}
	.wrapper > section .image {
		max-height: 450px;
		height: 100%;
	}
		.wrapper > section .image img {
			max-height: 450px;
			height: 100%;
		}
	.grid {
		transform: translateX(-25%);
	}
		.grid .row, .grid .row img {
			max-height: 350px;
			height: 100%;
		}
}