@charset "utf-8";
/* CSS Document */

html {height: 100%; overflow:hidden;}
a {color:#C69214; text-decoration:underline; font-weight:700; perspective:2px; pointer-events:auto !important}
body {margin:0; padding:0; perspective:1px; transform-style:preserve-3d; height:100%; overflow-y:scroll; overflow-x:hidden; font-family:'EB Garamond',serif; font-weight:400; font-size:16px}
h1, h2, h3, h4 {line-height:1em; margin:0 0 0.5em 0; font-family:'Roboto Condensed',sans-serif; font-weight:700;}
h1 {font-size:3.25em; text-align:center; font-style:italic;}
h2 {font-size:2.25em; font-style:normal;}
h3 {font-size:1.75em; font-style:normal;}
h4 {font-size:1.5em; font-style: normal;}
p {font-size:1.5em; font-style:normal; line-height:1.5em; text-align:justify}
p + p, blockquote + p, div + p {margin-top:0; text-indent:1.5em}
p.intro {font-size:1em; font-style: italic;}
p.caption {display:block; clear:both; font-size:1em; line-height: 1em; margin: 0.5em 10% 1em 0; text-align:left}
.credit {margin-left:0.5em; font-weight: 700; font-style: italic;}
h2 + p:first-letter, p.first:first-letter {font-family:'Roboto Condensed', sans-serif; font-weight: 700; font-size:5em; float:left; display:inline-block; line-height:0.9em; padding:0 10px 0 0}

blockquote {font-size:1.2em; line-height:1.6em; font-style:italic; color:#000; font-family:'Roboto Condensed',sans-serif; font-weight:700; text-transform:uppercase; margin-bottom:0.25em; padding: 1.5em 2em 1em 2em; width:50%; position: relative; border-radius:1em;
background: #e2dbc9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZGJjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGJkYWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #e2dbc9 0%, #c4bdae 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2dbc9), color-stop(100%,#c4bdae));
background: -webkit-linear-gradient(top,  #e2dbc9 0%,#c4bdae 100%);
background: -o-linear-gradient(top,  #e2dbc9 0%,#c4bdae 100%);
background: -ms-linear-gradient(top,  #e2dbc9 0%,#c4bdae 100%);
background: linear-gradient(to bottom,  #e2dbc9 0%,#c4bdae 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2dbc9', endColorstr='#c4bdae',GradientType=0 );
}
blockquote:nth-of-type(odd) {margin: 0 -40% 2rem 2rem; float:right}
blockquote:nth-of-type(even) {margin: 0 2rem 2rem -40%; float:left}

blockquote.longform-series {background: #000000 !important;
background: -moz-linear-gradient(top,  #000000 0%, #45484d 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#45484d)) !important;
background: -webkit-linear-gradient(top,  #000000 0%,#45484d 100%) !important;
background: -o-linear-gradient(top,  #000000 0%,#45484d 100%) !important;
background: -ms-linear-gradient(top,  #000000 0%,#45484d 100%) !important;
background: linear-gradient(to bottom,  #000000 0%,#45484d 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 ) !important;
font-size:0.9em !important; line-height:1 !important; font-style:normal !important; color:#FFF !important; text-transform:none !important; padding: 1.5em 2em 1em 2em; width:33% !important; margin: 0 0 2rem 2rem !important; float:right !important; font-family:'EB Garamond',serif !important; font-weight:400 !important;}
blockquote.longform-series a {font-family:'Roboto Condensed',sans-serif !important; font-weight:700 !important}
blockquote.longform-series ul {margin:1em -1em 1em -3em !important; list-style:none !important}
blockquote.longform-series li {display:block !important; border-bottom:1px dotted #C69214 !important; padding:0.5em 0 !important}
blockquote.longform-series li:last-of-type {border-bottom:none !important}
blockquote.longform-series .desc:before {content: "\2014\a0"}

.photoblock {padding: 1.5em 4em 1em 4em; width:50%; position: relative; color: #000}
.photoblock:nth-of-type(odd) {margin: 0 -25% 0 2rem; float:right; border-left:4px solid #373A36}
.photoblock:nth-of-type(even) {margin: 0 2rem 0 -25%; float:left; border-right:4px solid #373A36}
.photoblock img {clear:both; margin-bottom:1em}
.photoblock:nth-of-type(odd) img {float:left; clear:both; margin-bottom:1em}
.photoblock:nth-of-type(even) img {float:right}

.headshotblock {padding: 1.5em 4em 1em 4em; width:150px; position: relative; color: #000; margin: 0 -25% 0 2rem; float:right; border-left:1px solid #D0D0CE}
.headshotblock img {clear:both; margin-bottom:1em}

blockquote br {display: none;}
blockquote .quote:before, blockquote .quote:after {content: "\201C"; font-weight: 700; font-size: 250%; position: absolute; color:#FFF; text-shadow: 0 0 5px rgba(0,0,0,0.4);}
blockquote .quote:before {top:0.5em; left:0.25em;}
blockquote .quote:after {content: "\201D"; bottom: 0.5em; right: 0.5em;}

p.quote {font-size:1.2em !important; line-height: 1.6em; font-style: italic; color: #000; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-transform:uppercase; margin: 0 !important; padding: 0em 0em 0em 0.7em !important;}
p.cite {color: #000; text-transform:#373A36; line-height:1; font-size:0.8em; font-family: 'Roboto Condensed', sans-serif; font-weight:300; margin:0 !important; margin-top:0.5em !important; font-style:italic; padding:0 !important; text-align:left !important}
p.cite:before {content: "\2014\a0"}
.pull-quote {margin: 1em 0em; padding: 0em 0em 0em 0.7em;}
.pullout {float:right; width:340px; margin:0 0 1em 1em; border-left: 3px solid #666; padding:0 1em}

.slide {position: relative; padding: 25vh 10%; height:100%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit;}
.slide:before, .textslide:before {content: ""; position: absolute; top: 0; bottom: 0; left:0; right:0;}
.slide:nth-child(2n+1) .title {margin-left: 0; margin-right: auto;}
.slide:nth-child(2n) .title {margin-left: auto; margin-right: 0;}
.slide, .slide:before {background: 50% 50% / cover;}

.textslide {position: relative; padding: 10vh 25%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit; pointer-events:none}
#slide1.textslide {padding: 10vh 5% !important}
hr {border:none;height:10px;width:40%; max-width:400px; margin:3em auto; background-color:#C69214}

.photostrip {width:100vh !important; border-top:3px dotted #373A36; border-bottom:3px dotted #373A36; padding:1em 10%; margin:2em -10vh; overflow:auto}
.photostrip img {float:left; width:30%; height:30%; max-width:100%; box-shadow: 0 0 8px rgba(0, 0, 0, .7); margin-right:1em; display:block}
.photostrip img:last-of-type {margin-right:0; clear:right}
.title {width: 80%; padding: 5%; background: #FFF}
.headerbg {top:0 !important; width: 80%; margin:0 5% !important; padding: 2% 5%; border-radius: 15px; background: rgba(0,0,0, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.headerbg a {border:none; display:block}
.headerbg img {max-width:100%; margin:0.5em auto; border:none}

.bigslidecaption {width: 80%; margin:45% 5% auto 5% !important; padding: 2% 5%; border-radius: 1em; background: rgba(0,0,0, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7); color:#FFF; font-family:'Roboto Condensed',sans-serif; font-weight:300; font-style:italic}
.header {text-align: center; font-size: 175%; color: #fff; text-shadow: 0 2px 2px #000;}
.header p {text-align: center; font-size: 125%; line-height: 1.5; color: #fff; text-shadow: 0 2px 2px #000;}

#title {background-image: url("TLI-captains.jpg"); background-attachment: fixed; background-color: #999}
#slide1:before,
#slide3:before {background-color:#FFF; transform: translateZ(-1px) scale(2);z-index:-1;}
#slide1 {font-size:150%; line-height:2}
#slide3, #slide5, #slide7, #slide9, #slide11, #slide13, #slide15 {font-size:100%; line-height:1.2}
#slide4 {background-image: url("TLI-carly.jpg")}
#slide6 {background-image: url("TLI-trey.jpg")}
#slide8 {background-image: url("TLI-tori.jpg")}
#slide10 {background-image: url("TLI-willie.jpg")}
#slideend {background-color:#373A36; padding-top:10vh}
#slideend h1 {color:#FFF}
#slideend p {font-size:80%}
#slideend p:first-of-type {font-size:100%}
#slideend img {display:block; margin:1em auto; width:80%; text-align:center;}

.masthead {margin:0 auto !important; text-align:center !important; overflow-y:auto !important; transform-style:flat !important; perspective:none !important; margin-top:2em !important}
.masthead img {width:auto !important; max-width:100% !important; position:relative !important; top:0 !important; left:auto !important; height:auto !important; transform: none !important; padding: !important; border-radius:none !important; background:none !important; box-shadow:none !important}

.video-container {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; display:block; margin:1em auto; clear:both}
.video-container iframe,
.video-container object,
.video-container embed {position: absolute; top: 0; left: 0; width: 80%; height: 80%; margin:1em 10%}

.slide.placeholder {color:#FFC; font-size:1.5em; text-align:center; padding:10%}

@media (min-width: 1900px) {
.bigslidecaption {margin-bottom:30% !important; background: rgba(0,0,0, .7) !important;}
}

@media (max-width: 767px) {
body {font-size:14px}
.headerbg {top:0 !important; width: 80%; margin:0 5% !important; padding: 2% 5%; border-radius: 15px; background: rgba(0,0,0, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.headerbg h1 {font-size:2em}
.headerbg h3 {font-size:1em}
.title img {display:none}
.title {width: 94%; padding: 5% 3%; background: #FFF}
.textslide {position: relative; padding: 3vh 9% 3vh 3%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit;}
.pullout {float:none; width:90%; margin:1em 0; border-top: 3px solid #666; border-bottom: 3px solid #666; border-left:none; padding:1em}
.bigslidecaption {width: 80%; margin:30% 5% auto 5% !important}
blockquote {width:85% !important; padding:1em 3em 1em 2em !important; margin: 1em 15% 1em 0 !important; float:none !important}
blockquote.longform-series {width:80% !important; padding:0.5em 3em 0.5em 2em !important; margin: 1em auto !important}
blockquote.longform-series img {display:block !important}
.photoblock {width:100% !important; padding:0 !important; margin: 2em auto 1em auto !important; float:none !important; border:none !important; border-top:4px solid #373A36 !important; border-bottom:4px solid #373A36 !important}
.photoblock img {max-width:100% !important; margin:1.5em auto 1em auto !important}
blockquote .quote:before {top:0.5em; left:0.25em;}
blockquote .quote:after {content: "\201D"; bottom: 0.5em; right: 0.5em;}
.headshotblock {margin: 0 0 0 2rem}
.textslide p {margin:auto 10px}
#slideend h1 {font-size:2em}
}
@media (max-width: 479px) {
body {font-size:12px}
.headerbg {top:0 !important; width: 80%; margin:0 5% !important; padding: 2% 5%; border-radius: 15px; background: rgba(0,0,0, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
.headerbg h1, #slideend h1 {font-size:2em}
.headerbg h3 {font-size:1em}
.bigslidecaption {width: 80%; margin:50% 5% auto 5% !important}
blockquote {width:80% !important; padding:0.5em 3em 0.5em 2em !important; margin: 1em 20% 1em 0 !important}
blockquote p {text-align:left !important}
.headshotblock {padding: 1.5em 4em 1em 1em; width:150px; position: relative; color: #000; margin: 0 0 0 1rem; float:right; border-left:1px solid #D0D0CE}
.headshotblock img {clear:both; margin-bottom:1em}
}