/* CSS for lindseybutler.com

....................................................
...........................................BL.......
..........................................LBLB......
.........................................BLBLBL.....
........................................LBL.LBL.....
.......................................BLBL..BLB....
......................................LBLB...BLB....
.....................................BLBL....BLB....
.....................................BLBL...LBLB....
.....................................BLBL..BLBL.....
.....................................BLBL.LBLB......
.....................................BLBLBLBL.......
.........................BL..........BLBLBL.........
.............BLB........LBLBLB......LBLBLB..........
.........BLBLBLBLBLBL....BLBLBLBLBLBLBLBLBL.........
........LBLBLBLBLBLBLBL.....LBLBLBLBLBLBLBLB........
.......BLBLBL...LBLBLBLBLB.........BLB...BLB........
......LBLBL.........LBLBLBLB.......BLBLBLBLB........
.....BLBLB............LBLBLBLB.....BLBLBLBL.........
....LBLBL................BLBLBL....BLBLBLBLBLB......
....LBLBL..................BLBLBL.LBLB....LBLBL.....
....LBLBL.....................LBLBLBLB...BLBLBL.....
....LBLBL.......................LBLBLBLBLBLBLB......
....LBLBL.........................LBLBLBLBLBL.......
....LBLBL........................BLBLBLB............
....LBLBL........................BLB.BLBLB..........
....LBLBL......................BLBL....BLBLB........
.....BLBL.....................LBLB.......BLB........
.....BLBLB...................BLBL...................
.....BLBLB..................LBLB....................
......LBLBL................BLBL.....................
.......BLBLB.............BLBLB......................
.......BLBLBL..........BLBLBL.......................
........LBLBLB.......BLBLBL.........................
.........BLBLBLB..LBLBLBL...........................
...........BLBLBLBLBLBL.............................
.............BLBLBLB................................  
....................................................
....................................................

*/

/* Font Styles */

@font-face {
  font-family: "Cabin Italic";
  font-style: italic;
  font-weight: 400;
  src: local("Cabin Italic"), local("Cabin-Italic"), url("https://fonts.gstatic.com/s/cabin/v12/u-4_0qWljRw-Pd81z_9CngZscwY.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cabin";
  font-style: normal;
  font-weight: 400;
  src: local("Cabin"), local("Cabin-Regular"), url("https://fonts.gstatic.com/s/cabin/v12/u-4x0qWljRw-Pd8w__1ImSRu.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cabin Semibold";
  font-style: normal;
  font-weight: 600;
  src: local("Cabin SemiBold"), local("Cabin-SemiBold"), url("https://fonts.gstatic.com/s/cabin/v12/u-480qWljRw-Pdfv2-hluylEeQ5J.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Matiz";
	/*src: local("Matiz-webfont"), local("Matiz"), url(".s/fonts/Matiz-webfont.woff") format("woff");*/
	src: url("./fonts/Matiz-webfont.eot");
    src: url("./fonts/Matiz-webfont.eot?#iefix") format("embedded-opentype"),
		url("./fonts/Matiz-webfont.woff2") format("woff2"),
		url("./fonts/Matiz-webfont.woff") format("woff"),
		url("./fonts/Matiz-webfont.ttf") format("truetype");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-weight: normal;
    font-style: normal;
}


/* Main Styles */

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

html{
	width: 100%;
}

body {
	color: #0b7aa7;
	width: 100%;
	font: 1em "Cabin", "Gill Sans", Helvetica, Arial, "sans-serif";
	line-height: 1.8em;
	}

body *{
	outline:none;
}

p, ul, h1, h2, h3 h4, h5, h6 {
	font-weight:normal;
}

a img, img {
	outline:none;
}
img {
	width: 100%;
	height: auto;
}

a {
	color:#4d4d4d;
	text-decoration:none;
}

div {
	display: block;
}

ul {
	list-style:none;
	list-style-type: none;	
}

p {
	letter-spacing: .02em;
}

.clear {
	clear: both;
}


/* LindseyButler.com Top Navigation - Index */
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    height: 4.375em;
	background-image: linear-gradient( rgba(77,77,77,1), rgba(77,77,77,0) );
	transition: .5s;
}
.header-content {
	position: static;
    left: 0;
	top: -4.375em;
    width: 100%;
    z-index: 99;
	padding: 1.15em 0;
	font: 1.15em "Matiz", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #e6e6e6;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: .5s;
}
body.scroll #header .header-content, body.work #header .header-content {
    position: fixed;
    background: #e6e6e6;
	top: 0;
	color: #4d4d4d;
	border-bottom: .08em solid #cccccc;
}
#logo {
	height: 1.15em;;
    width: 2em;
    float: left;
    margin-left: 10px;
	display: none;
	opacity: 0;
}
.logo {
	height: 2em;
	margin-top: -.4em;
}
body.scroll #logo, body.work #logo {
	display: block;
	opacity: 1;
}
#site-nav-container {
	height: 1.15em;
}
#site-nav {
	float: right;
	padding-top: 0;
}
.nav-menu li {
	display: inline-block;
    padding: 0 15px;
}
.nav-menu li a {
	display: block;
    position: relative;
	color: #e6e6e6;
	transition: .3s;
	line-height: 1.17em;
}
.nav-menu li a span {
	display: block;
	position: absolute;
	transition: .3s;
	bottom: -0.35em;
	background-image: url("images/line_grey.svg");
	background-repeat: no-repeat;
	background-size: 100% 5px; 
	height: 5px;
	width: 130%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}
body.scroll .nav-menu li a span, body.work .nav-menu li a span {
	background-image: url("images/line_blue1.svg");
}
body.scroll .nav-menu li a, body.work .nav-menu li a {
	color: #4d4d4d;
}
.nav-menu li a:hover {
	color: #b3b3b3;
}
body.scroll .nav-menu li a:hover, body.work .nav-menu li a:hover {
	color: #0b7aa7;
}
.nav-menu li a.select {
	color: #b3b3b3;
}
body.scroll .nav-menu li a.select, body.work .nav-menu li a.select {
	color: #0b7aa7;
}

/* LindseyButler.com Index styles */
#main {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
	background-color: #0b7aa7;
}
.container {
	width: 100%;
    max-width: 1100px;
    padding: 0 15px;
    margin: 0 auto;
}
#teaserImage {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #4d4d4d;
}
#teaserVid {
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	width: 100vw; 
	height: 100vh; 
	opacity: .6;
}
.teaservid {
  	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	-o-object-fit: cover; 
	object-fit: cover;
	-webkit-object-fit: cover;
    -moz-object-fit: cover;
	
}
#headerSpacer {
	width: 100%;
	padding-top: 4.375em;
}
#headerSpacer-work {
	width: 100%;
	padding-top: 7.075em;
}
#nameCon, #nameCon-work {
	width: 100%; 
	display: flex; 
	justify-content: center; 
	align-items: center;
}
#nameCon {
	height: calc(70.46% - 50px);
}
#nameCon-work {
	height: 72.16%;
	max-height: 570px;
}
#nameWidth, #nameWidth-work { 
	height: 100%; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
}
#nameWidth {
	width: 75%;
	max-width: 825px;
}
#nameWidth-work {
	width: 65%;
	max-width: 715px;
}
#logoCon {
	width: 100%; 
	padding-top: 51.15%;  
	position: relative;
}
#logoCon-work {
	width: 100%; 
	padding-top: 51.75%;  
	position: relative;
}
#LBlogoCon {
	position: absolute; 
	left: 0; 
	right: 0; 
	top: 0; 
	bottom: 0; 
	display: flex; 
	flex-flow: row wrap; 
	justify-content: center;
}
#logoNP, #logoNP-work {
	background-image: url("images/draw_lb_main.svg");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
    width: 40%;
    height: 100%;
	display: block;
}
#logoNP {
	max-height: 422px;
}
#logoNP-work {
	max-height: 370px;
}
#topTxtContainer, #topTxtContainer-work {
	width: 56%;
	height: 100%;
}
#topTxtContainer {
	max-height: 422px;
}
#topTxtContainer-work {
	max-height: 370px;
}
#nameSpacer {
    padding-top: 34.5%;
}
#nameContainer {
	width: 100%;
    margin-left: 2.3%;
	overflow: hidden;
	text-align: left;
}
.intro {
	font-size: calc(100vw*.0454);
	letter-spacing: .05vw;
    padding-bottom: 0em;
	color: #e6e6e6;
}
h2.nameTitle {
	font-family: "Cabin Italic", "Gill Sans", Helvetica, Arial, "sans-serif";
	color: #e6e6e6;
	font-size: calc(100vw*.0209);
    letter-spacing: .076vw;
    padding-left: .09em;
	margin-top: -1%;
}
#homeSpacer, #intro, #process, #experience, #footer, #copyright, #workSpacer, #work, .work-sample {
	position: relative;
	width: 100%;
	padding: 0 30px;
}
#homeSpacer {
	height: calc(65.46% + 5em + 45px);
}
#scrollIndicContainer {
	position: absolute; 
	margin-top: calc((100vh * .586) + 5em);
	width: 100%; 
	height:4em;
	display: block;
}
#scrollIndic {
	margin-left: auto; 
	margin-right: auto; 
	width: 4em; 
	height: 80%; 
	text-align: center;
}
i.scrollArrowDown {
	border: solid rgba(158,158,158,.5); 
	border-width: 0 .3em .3em 0;
	display: inline-block; 
	padding: .8em; 
	transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	opacity: 0;
}
.blue1 {
	background-color: #0fa0d1;
	color: #ffffff;
}
.blue2 {
	background-color: #0b7aa7;
	color: #06537d;
}
.blue3 {
	background-color: #06537d;
	color: #ffffff;
}
.grey1 {
	background-color: #e6e6e6;
	color: #666666;
}
.grey2 {
	background-color: #b3b3b3;
	color: #666666;
}
.grey3 {
	background-color: #4d4d4d;
	color: #e6e6e6;
}
.texture:before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url("images/dust_scratches.png") top center;
	mix-blend-mode: color-dodge;
}

.diagonal {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1600px 40px 0;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10;
}
.diagonal.top {
    top: -40px;
    border-width: 0 0 40px 1600px;
}
.diagonal.top.right-blue1 {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #0fa0d1;
    border-left-color: transparent;
}
.diagonal.bottom.right-blue1 {
    border-top-color: transparent;
    border-right-color: #0fa0d1;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.diagonal.top.right-blue2 {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #0b7aa7;
    border-left-color: transparent;
}
.diagonal.bottom.right-blue2 {
    border-top-color: transparent;
    border-right-color: #0b7aa7;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.diagonal.top.right-blue3 {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #06537d;
    border-left-color: transparent;
}
.diagonal.bottom.right-blue3 {
    border-top-color: transparent;
    border-right-color: #06537d;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.diagonal.top.right-grey1 {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #e6e6e6;
    border-left-color: transparent;
}
.diagonal.bottom.right-grey1 {
    border-top-color: transparent;
    border-right-color: #e6e6e6;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.diagonal.top.right-grey2 {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #b3b3b3;
    border-left-color: transparent;
}
.diagonal.bottom.right-grey2 {
    border-top-color: transparent;
    border-right-color: #b3b3b3;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.diagonal.top.right-grey3 {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #4d4d4d;
    border-left-color: transparent;
}
.diagonal.bottom.right-grey3 {
    border-top-color: transparent;
    border-right-color: #4d4d4d;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

h1 {
	font: 2.3em "Matiz", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: .02em;
	padding-bottom: 13px;
	text-transform: uppercase;
}
h1.color-grey {
	color: #e6e6e6;
}
h1.color-grey2 {
	color: #4d4d4d;
}
h1.color-blue, h2.color-blue {
	color: #06537d;
}
h2 {
	font-size: 1.2em;
	line-height: 1.9em;
	padding-bottom: 9px;
	letter-spacing: .02em;
}
h2.color-grey {
	color: #f2f2f2;
}
h2.color-grey2 {
	color: #5a5a5a;
}
.index-text-content {
	padding: 3.1em 15px;
    width: 50%;
}
.index-img-content {
	padding: 3.1em 15px;
    width: 49.7%;
}
#intro .index-content .index-text-content {
	width: 48%;
}
#intro .index-content .index-img-content {
	width: 51.5%;
}
#process .index-content .index-text-content {
	width: 52.5%;
}
#process .index-content .index-img-content {
	width: 47%;
}
#experience .index-content .index-text-content {
	width: 51%;
	padding-left: 5.2em;
}
#experience .index-content .index-img-content {
	width: 48.5%;
}
#footer .index-content .index-text-content {
	width: 53.5%;
}
#footer .index-content .index-img-content {
	width: 37%;
}
.exp-list {
	display: block;
	text-align: left;
}
.index-content, .cr-content {
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	justify-content: center;
	flex-wrap: wrap;
	text-align: left;
}
.dot {
	font-size: 1.35em;
    padding-right: 20px;
}
.dot2 {
    padding: 0 10px 0 6px;
}
#portfolio-btn-container {
	position: relative;
	margin-top: 30px;
	height: 3.55em;
}
#portfolio-btn {
	position: absolute;
	border-radius: .35em;
  	background: #0fa0d1;
	text-align: center;
	width: 16.35em;
  	padding: .6em .6em .4em .6em;
	transition: .3s;
	left: 0;
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-o-transform: translateX(0%);
}
#portfolio-btn-border {
	position: absolute;
	border-radius: .35em;
	border: .1em solid #0b7aa7;
	width: 24.8em;
    height: 2.93em;
    top: .1em;
    left: .12em;
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-o-transform: translateX(0%);
}
#portfolio-btn-container a #portfolio-btn {
	color: #0b7aa7;
	font: 1.53em "Matiz", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: .02em;
	text-transform: uppercase;
}
#portfolio-btn-container a:hover #portfolio-btn {
	background: #47cbea;
}

#email-btn-container {
	position: relative;
	margin-top: 30px;
	height: 3.55em;
}
#email-btn {
	position: absolute;
	border-radius: .35em;
  	background: #e6e6e6;
	width: 11.2em;
	text-align: center;
  	padding: .6em .6em .4em .6em;
	transition: .3s;
	left: 0;
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-o-transform: translateX(0%);
}
#email-btn-border {
	position: absolute;
	border-radius: .35em;
	border: .1em solid #999;
	width: 16.96em;
    height: 2.85em;
    top: .1em;
    left: .1em;
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	-o-transform: translateX(0%);
}
#email-btn-container a #email-btn {
	color: #999;
	font: 1.53em "Matiz", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: .02em;
	text-transform: uppercase;
}
#email-btn-container a:hover #email-btn {
	background: #fff;
}
.index-img {
	height: 100%; 
	width: 90%;  
	margin: 0 auto;
}
.work-img {
	height: 100%; 
	width: 100%;  
	margin: 0 auto;
}
.logo-circle {
	width: 2.25em;
}
.cr-left {
	padding: 1.3em 0 .7em 0;
    width: 10%;
}
.cr-right {
	padding: 1.35em 0 0 0;
    width: 89.7%;
	text-align: right;
	font-size: .84em;
}
img.lazy {
	background-image: url("images/draw_lb.svg");
	mix-blend-mode: multiply;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 25% 25%;
	height: 380px;
}

#demoreelContainer {
	width: 80%; 
	padding-bottom: 80px;
}
#frame {
	background-color: #000; 
	width: 100%; 
	padding-top:56.25%;
	position: relative;
}
#demoreel {
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}

/* LindseyButler.com Top Navigation - Secondary Pages */
.work-cat {
	background-image: url("images/sep/teaser_cat1.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-blend-mode: overlay;
	background-size: cover;
	transition: background .9s;
}
#subheader {
    position: fixed;
    top: 4em;
    left: 0;
    width: 100%;
    z-index: 95;
    height: 3em;
	transition: .5s;
	background-color: #d6d6d6;
}
.subheader-content {
	position: static;
    left: 0;
	top: 0;
    width: 100%;
    z-index: 95;
	padding: .85em 0;
	font: 1.05em "Matiz", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #999;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: .5s;
}
.subnav-menu ul {
	text-align: center;
}
.subnav-menu li {
	display: inline-block;
    padding: 0 4%;
}
.subnav-menu li a {
	display: block;
    position: relative;
	color: #999;
	transition: .3s;
	line-height: 1.07em;
	cursor: pointer;
}
.subnav-menu li a span {
	display: block;
	position: absolute;
	transition: .3s;
	bottom: -0.29em;
	background-image: url("images/line_blue2.svg");
	background-repeat: no-repeat;
	background-size: 100% 3px; 
	height: 3px;
	width: 130%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}
.subnav-menu li a:hover, .subnav-menu li a.select {
	color: #06537d;
}
#workSpacer {
	height: calc(76.16% + 7.375em);
	max-height: calc(570px + 8.575em);
}
.work-content {
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center;
}
.work-img-content {
	padding: 5em 15px 1.55em 15px;
    width: 80%;
	text-align: center;
}
.work-text-content {
	padding: .7em 15px 5em 15px;
    width: 65%;
	text-align: center;
}
#btn-container {
	position: relative;
	margin-top: 30px;
	height: 3.55em;
}
#btn {
	position: absolute;
	border-radius: .35em;
	text-align: center;
  	padding: .6em .6em .4em .6em;
	transition: .3s;
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}
#btn-border {
	position: absolute;
	border-radius: .35em;
	width: 79.3%;
    height: 82.5%;
    top: 1.72%;
    left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}
#btn-container a #btn {
	font: 1.53em "Matiz", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: .02em;
	text-transform: uppercase;
}
#btn.blue {
	background: #0fa0d1;
}
#btn-border.blue {
	border: .1em solid #0b7aa7;
}
#btn-container a #btn.blue {
	color: #0b7aa7;
}
#btn-container a:hover #btn.blue {
	background: #47cbea;
}
#btn.grey {
	background: #e6e6e6;
}
#btn-border.grey {
	border: .1em solid #999;
}
#btn-container a #btn.grey {
	color: #999;
}
#btn-container a:hover #btn.grey {
	background: #fff;
}
p.color-white {
	color: #fff;
}
#topTxtContainer-work #nameContainer {
	width: 47vw;
}
#topTxtContainer-work #nameContainer h1.color-grey.intro {
	font-size: calc(100vw*.04);
}
#topTxtContainer-work #nameContainer h2.nameTitle {
	font-size: calc(100vw*.0136);
	letter-spacing: .045vw
}