/* FONTS */
@font-face {font-family: 'Default'; src: url('fontdefault.otf') format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Causal Loop'; src: url('fontcausalloop.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Default Heading'; src: url('fontdefaultheading.otf') format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Bloodshed'; src: url('fontbloodshed.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Bloodshed Banner'; src: url('fontbloodshedbanner.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Ink Inside'; src: url('fontinkinside.otf') format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'The Last Faith'; src: url('fontthelastfaith.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Ghost Song'; src: url('fontghostsong.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Frosthaven'; src: url('fontfrosthaven.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Transient'; src: url('fonttransient.otf') format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Brigador'; src: url('fontbrigador.otf') format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Stasis'; src: url('fontstasis.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Old City Leviathan'; src: url('fontoldcityleviathan.ttf') format('truetype'); font-weight: normal; font-style: normal;}

/* TEXT EFFECTS */
.text-s {text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px 5px rgba(0, 0, 0, 0.5);}
.text-stroke {text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 2px 2px 5px rgba(0, 0, 0, 0.45);}
.text-n {transform: scaleX(0.9); transform-origin: left;}
.text-broad {transform: scaleX(1.1); transform-origin: left;}
.text-b {color: rgb(51, 51, 51);}
.text-w {color: rgb(235, 235, 235);}

/* LINKS */
a.no-underline {text-decoration: none; color: rgb(51, 51, 51);}
a.no-underline-white {text-decoration: none; color: rgb(235, 235, 235);}
a.underline-on-hover:hover {text-decoration: underline;}

/* ABBREVIATIONS */
.abbreviation::after {content: attr(title); display: none; position: absolute; background-color: black; color: white; font-size: 12px; font-weight: 300; padding: 3px 8px; border: 1px solid #000; border-radius: 3px; z-index: 1; top: -12px; left: 62px; transform: translate(-50%, -50%); white-space: nowrap;}
.abbreviation:hover::after {display: block;}
.abbreviation {position: relative; cursor: help;}

/* STRUCTURE */
body {background: url(imgPixelT.png) fixed #FFFFFF; color: white; background-position: center; background-size: cover; margin: 0; padding: 0; overflow-x: hidden;}
.back-l {background-image: url(imgPixelW.png);}
.pixelbar-full {width: 1010px; height: 1px; display: block;}
.pixelbar-mobile {width: 1010px; height: 2px; display: block;}
.footer {text-align: center; font-family: Segoe UI; font-size: 11px; margin-bottom: 30px;}

/* TOP BAR */
#topBar {position: fixed; top: 0; width: 100%; z-index: 9999; background-color: white; height: 45px; border-bottom: 1px solid rgb(225, 225, 225); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);}
.topbar-container {display: flex; justify-content: space-between; align-items: center; height: 100%; width: 100%;}
.topbar-container img {vertical-align: middle; border-radius: 0px;}
.topbar-filler {flex-grow: 1;}
.topbar-left-center {width: 250px; text-align: left;}
.topbar-center {width: 510px; text-align: center;}
.topbar-right-center {width: 250px; text-align: right;}
.topbar-btn {font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 17px; color: rgb(51, 51, 51); background-color: transparent; border: 0px; padding: 5px 7px; display: inline-block; line-height: 1.2; border-radius: 3px; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer;}
.topbar-btn:hover {background-color: rgb(51, 51, 51); color: white;}
.topbar-spacer {border: none; width: 4px; height: 24px; vertical-align: middle;}
.topbar-icon {position: absolute; top: 0; left: 0; width: 24px; height: 24px; transition: opacity 0.2s ease-in-out;}
.topbar-icon.hover {opacity: 0;}
.icon-wrapper {position: relative; display: inline-block; align-items: center; width: 24px; height: 24px; vertical-align: middle;}
.icon-wrapper:hover .default {opacity: 0;}
.icon-wrapper:hover .hover {opacity: 1;}

/* DEMO VIDEOS */
.demo-reel {width: 1010px; height: 568px; border-radius: 10px; margin-bottom: 7px;}
.demo-video {width: 500px; height: 281px; border-radius: 10px;}
.demo-mobile {width: 1010px; height: 568px; border-radius: 10px;}

/* TESTIMONIALS */
.testimonial-table {margin: 0 auto; width: 1010px; height: 280px; border: none; border-collapse: separate; border-spacing: 10px;}
.testimonial-container {width: 1010px; border-radius: 10px; padding: 0px; margin: 0 auto; overflow: hidden; position: relative;}
.testimonial {width: 1010px; float: left; margin-right: 100px; z-index: 0;}
.testimonial-text {padding: 10px;}
.testimonial-headshot {width: 110px; height: 110px; border-radius: 6px;}
.slick-dots {position: absolute; bottom: 0px; left: 0; right: 0; list-style: none; text-align: right; padding: 0 8px 5px 0; margin: 0; z-index: 8000;}
.slick-dots li {display: inline-block; margin: 0 5px;}
.slick-dots li button {display: block; width: 10px; height: 14px; border-radius: 50%; border: 1px solid black; background-color: white; color: white; box-shadow: 0 0 0 1px #d9d9d9; text-indent: -9999px; cursor: pointer; transition: background-color 0.3s ease;}
.slick-dots li.slick-active button {background-color: black; box-shadow: 0 0 0 1px #d9d9d9;}

/* RESUME TABLE */
.resume-table {margin: 0 auto; width: 1010px; height: 280px; border: none; border-collapse: collapse; background-image: url('imgTestimonial0002.png'); background-size: cover;}
.resume-headshot {vertical-align: top; height: 280px; width: 280px; padding: 0;}
.resume-headshot img {width: 280px; height: 280px; border-radius: 0px;}
.resume-topcenter {vertical-align: middle; text-align: center;}
.resume-btn {font-family: 'Default Heading'; font-size: 42px; font-weight: 600; color: rgb(51, 51, 51); vertical-align: bottom; background-color: transparent; border: 0px; padding: 5px 10px 0px 10px; display: inline-block; line-height: 1.1; border-radius: 3px; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer;}
.resume-btn:hover {background-color: rgb(120, 120, 120); color: white;}
.resume-topright {vertical-align: middle; text-align: right; width: 280px;}
.resume-text {font-family: 'Default'; font-size: 16px; text-align: left; vertical-align: top;}
.resume-text-table {width: 100%; line-height: 1.5; border: 0;}
.resume-bullet {width: 30px; text-align: center; vertical-align: top;}

/* RESUME ENTRIES */
.resume-entry, .resume-entry-list, .resume-entry-banner, #full-view-iframe {transition: opacity 0.2s ease;}
.resume-buttons-container {max-width: 1010px; margin: 0 auto; padding: 20px 1px; display: flex; justify-content: space-between;}
.resume-buttons-left {text-align: left; vertical-align: middle;}
.resume-buttons-right {text-align: right; vertical-align: middle;}
.resume-buttons {margin-bottom: 10px;}
.resume-button {background-color: #E6E6E5; color: black; font-family: 'Default'; font-size: 15px; font-weight: bold; padding: 3px 12px; border: none; border-radius: 20px; cursor: pointer; margin-right: 10px; transition: background-color 0.1s ease, color 0.3s ease;}
.resume-button.active {background-color: black; color: white;}
.resume-button:hover {background-color: black; color: white;}
.resume-gallery {display: flex; flex-wrap: wrap; justify-content: left; width: 1010px;}
.resume-entry {width: 252px; margin-bottom: 10px; box-sizing: border-box; text-align: center; font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 13.5px; font-style: italic; line-height: 1.7;}
.resume-entry img {width: 247px; height: 139px; border-radius: 10px;}
.resume-entry:nth-child(4n) {margin-right: 0;}
.resume-entry-list {width: 1010px; font-family: 'Segoe UI', sans-serif; font-weight: 600; color: rgb(51, 51, 51); font-size: 13.5px; font-style: italic; line-height: 1.5; display: flex; flex-direction: column;}
.resume-list-left {width: 300px; text-align: right;}
.resume-list-centerleft {width: 470px; text-align: left; padding-left: 5px;}
.resume-list-centerright {width: 158px; text-align: right;}
.resume-list-right {width: 77px; text-align: left; padding-left: 5px;}
.resume-list-row {display: flex; justify-content: space-between; margin-bottom: 5px;}

/* POPUPS */
.misc-container {display: flex; flex-wrap: wrap; justify-content: center; width: 1010px; margin: 0 auto;}
.misc-item {width: 500px; margin: 0px 4px 10px 0; text-align: center; font-family: 'Default'; font-size: 16px; color: rgb(235, 235, 235);}
.misc-item img {width: 500px; height: 281px; border-radius: 10px;}
.misc-item:nth-child(2n) {margin-right: 0;}
.popup-link {cursor: pointer; border: 0px;}
.popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 9000; visibility: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s ease;}
.popup.show {visibility: visible; opacity: 1;}
iframe.popup-iframe, iframe.full-view-popup {width: 1010px; max-width: 100%; border: none; margin: 0; padding: 0; display: block; background: #000;}
.popup-content {background-color: black; width: 1040px; max-width: 100%; height: 100%; padding: 0 0 0 15px; margin: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); overflow-y: scroll; overflow-x: hidden; position: absolute; top: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; scrollbar-gutter: stable;}
body.no-scroll {position: fixed; width: 100%; overflow-y: scroll;}
.popup-header {height: 60px;}
.popup-divide {height: 10px; width: 100%;}
.playlist-wrapper {position: relative; border: none; display: block;}
.playlist-wrapper iframe {position: absolute; top: 0; left: 0; border: none;}
.play-button {display: block; cursor: pointer;}
.play-image-large {width: 1010px; height: 568px; border: 0px solid; border-radius: 0px;}
.play-image-small {width: 500px; height: 281px; border: 0px solid; border-radius: 10px;}

/* Mobile */
#topBar-m {position: fixed; top: 0; width: 100%; z-index: 9999; background-color: white; height: 90px; border-bottom: 1px solid rgb(225, 225, 225); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);}
.topbar-m-container {display: flex; justify-content: space-between; align-items: center; height: 100%; width: 100%;}
.topbar-m-container img {vertical-align: middle; border-radius: 0px;}
.topbar-m-left {width: 505px; text-align: left;}
.topbar-m-right {width: 505px; text-align: right;}
.topbar-m-btn {vertical-align: middle; font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 28px; color: rgb(51, 51, 51); background-color: transparent; border: 0px; padding: 5px 7px; display: inline-block; line-height: 1.2; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer;}
.topbar-m-btn:hover {background-color: rgb(51, 51, 51); color: white;}
.topbar-m-spacer {border: none; width: 6px; height: 48px; vertical-align: middle;}
#bottomBar-m {position: fixed; bottom: 0; width: 100%; z-index: 9999; background-color: white; height: 90px; text-align: center;}
.bottombar-container {display: flex; justify-content: space-between; align-items: center; height: 100%; width: 100%;}
.bottombar-container img {vertical-align: middle;}
.bottombar-center {width: 250px; text-align: center;}
.bottombar-m-icon {width: 48px; height: 48px; border: medium none; border-radius: 0px;}
@media screen and (min-width: 768px) {.mobile {display: none;}}
@media screen and (max-width: 767px) {
  .desktop {display: none;}
  .demo-reel {border-radius: 0px;}
  .demo-mobile {border-radius: 0px;}
  .testimonial-text {padding: 15px 15px; height: 290px; font-family: 'Segoe UI', sans-serif; font-weight: 600; color: rgb(51, 51, 51); font-size: 25px; text-align: left; vertical-align: middle; margin-left: 15px;}
  .testimonial-headshot {width: 220px; height: 220px; border-radius: 50%; vertical-align: top; margin: 0 auto 10px; display: block;}
  .slick-dots li button {width: 28px; height: 28px; border: 2px solid black;}
  .resume-table {margin-top: 40px;}
  .resume-headshot {vertical-align: bottom; margin-top: 10px;}
  .resume-headshot img {width: 350px; height: 350px; margin-bottom: 15px;}
  .resume-topright {width: 350px;}
  .resume-topcenter {font-size: 64px;}
  .resume-text {font-size: 24px;}
  .footer {font-size: 22px; margin-bottom: 40px; margin-top: 30px;}
}