/*
Theme Name: Matt Blank 2021
Author: Matt Blank
*/

/***** MAIN *****/
html {scroll-behavior: smooth;}
body {font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto' , Helvetica, Arial, sans-serif; font-size: 20px; padding: 0; margin: 0}
a {color: #005ABC; text-decoration: none}
a:hover {text-decoration: underline}
.wrap {width: 100%; max-width: 1060px; margin: auto; padding: 0 24px; box-sizing: border-box}
.main {width: 100%; float: left}
.clear {clear: both; float: none}
.blackbar {height: 180px; width: 100%; display: block; background: #000; position: absolute; z-index: -1}
.mobile {display: none !important}
@font-face {font-family: 'classic_console'; src: url('fonts/clacon2-webfont.woff2') format('woff2'), url('fonts/clacon2-webfont.woff') format('woff'); font-weight: normal; font-style: normal}


/***** CARD *****/
.card {border-radius: 20px; float: left; width: 100%; padding: 0 50px; box-sizing: border-box; margin-top: 48px; box-shadow: 0px 14px 14px rgba(0, 0, 0, 0.11); font-size: 17px; background: #fff}
.card h1 {font-size: 90px; margin: 0; line-height: 80px}
.card h2 {font-size: 22px; margin: 10px 0 24px 0}
.card a {color: #000}
.card .content {display: table; margin: auto}
.card .content ul {display:table-row; list-style: none; padding: 0; margin: 0}
.card .content li {display: table-cell; vertical-align: middle}
.card .contact {width: 100%; float: left}
.card .contact li img {margin-right: 16px}
.card span {margin-top: 16px; float: left; width: 100%}
.byline {width: 100%}
.byline img {top: 0px; position: relative; padding-left: 6px; width: auto; height: 16px}
.hero img {box-sizing: border-box; float: right; padding-left: 40px; width: auto; height: 420px; padding: 50px; padding-right: 0; margin-top: -25px}
.tooltip {position: relative; display: inline-block}
.tooltip .tooltiptext {visibility: hidden; width: 140px; font-size: 11px; color: #fff; background: #000; font-weight: bold; text-align: center; border-radius: 4px; padding: 8px 12px; top: 85%; left: 50%; margin-left: -78px; position: absolute; z-index: 1; box-sizing: border-box}
.tooltip .tooltiptext::after {content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent;}
.tooltip:hover .tooltiptext {visibility: visible}


/***** TIMELINE *****/
*, *::before, *::after {box-sizing: border-box}
.timeline {position: relative; width: 100%; margin: 0 auto; float: left; font-size: 17px; line-height: 25px; margin-top: 60px; margin-bottom: 60px}
.timeline::after { content: ''; position: absolute; width: 2px; background: #000; top: 0; bottom: 0; left: 50%; margin-left: -1px}
.container {position: relative; background: inherit; width: 50%; margin-bottom: 80px}
.container.left {left: 0}
.container.right {left: 50%}
.container::after {content: ''; position: absolute; width: 24px; height: 24px; top: 7px; right: -12px; background: #000; z-index: 1; border-radius: 24px; border: 4px solid #fff}
.container.right::after {left: -12px}
.container .date {font-size: 14px; font-weight: bold; color: #757575; width: 100%; margin-bottom: 12px; float: left}
.container.left .date {text-align: right}
.container .content {position: relative; box-sizing: border-box; top: 4px; margin-right: 40px}
.container.right .content {margin-left: 40px; margin-right: 0}
.container .content .logo img {width: auto; height: 28px; margin-bottom: 8px}
.container .content .logo.dennis img {width: auto; height: 42px}
.container .content img {width: 100%; height: auto}
.container .content h3 {margin: 0; padding: 0; margin-bottom: -12px}
.intro {box-sizing: border-box; padding: 24px 0; text-align: center; background: #fff; position: relative; border-top: 1px solid #000; border-bottom: 1px solid #000; z-index: 999; margin: auto; width: 80%; font-size: 24px; line-height: 34px; margin-bottom: 80px}
.intro p {padding: 0; margin: 0; margin-bottom: 24px}
.intro p:last-child {margin-bottom: 0}
.collapsible {background-color: #f1f1f1; cursor: pointer; padding: 16px; width: auto; border: none; text-align: center; outline: none; font-size: 15px; color: #000; border-radius: 8px; font-weight: bold; box-sizing: border-box}
.collapsible:hover {background: #e5e5e5}
.collapsible:after {content: '\002B'; color: #000; font-weight: bold; float: right; margin-left: 16px;}
.active:after {content: "\2212"}
.collapsedcontent {max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; margin-top: 24px; box-sizing: border-box}
.collapsedcontent span {font-size: 14px; font-weight: bold; color: #757575; margin-bottom: 5px; width: 100%; float: left}
.collapsedcontent p {margin-bottom: 28px}
.collapsedcontent p:last-child {margin-bottom: 0}


/***** ABOUT *****/
#about {width: 100%; background: #000; color: #fff; padding: 48px 0; box-sizing: border-box; float: left; line-height: 32px}
#about h2 {margin: 0; padding: 0; margin-bottom: 16px}
#about a {color: #338DEF}
#about ul {list-style: none; padding: 0; margin: 0; font-size: 15px; width: 100%; border-top: 1px solid #5e5e5e; padding-top: 24px; margin-top: 16px; float: left}
#about li {float: left; margin-right: 16px}
#about li:first-child {margin-right: 8px}
#about li a {margin-right: 16px}
#about li img {width: auto; height: 14px}
#about ul p {margin: 0}
#about ul li:first-child {float: none; width: 100%}
.profile {float: left; width: 20%; padding-right: 3%}
.profile img {width: 100%; height: auto; border-radius: 300px}
.abouttext {float: left; width: 80%}


/***** Lightbox *****/
.lightbox {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 80vw; display: none; z-index: 9999; background-color: rgba(0, 0, 0, 0.85);}
.lightbox-title {color: white; text-align: center; margin-top: 40px; font-size: 15px;}


/***** 404 *****/
.pagenotfound {text-align: center; font-size: 32px; padding-top: 16px}
.pagenotfound h1 {margin: 0; padding: 0; margin-bottom: 24px; font-size: 44px}
.pagenotfound a {font-size: 17px; font-weight: bold}
.pagenotfound p {margin: 0; padding: 0}
.pagenotfound p img {margin-top: 24px; border-radius: 16px; height: 450px; width: auto}
.crying {width: auto; height: 125px}


/***** INTERVIEW *****/
.interview {line-height: 30px}
.interview .card {padding: 0; padding: 12px; margin-bottom: 40px; text-align: center}
.interview .card h1 {margin-bottom: 20px; font-size: 50px; line-height: 55px; margin-top: 10px}
.interview .card img {width: 100%; height: 100%; border-radius: 12px}
.interview li {margin-bottom: 24px}
.interview ol {margin-bottom: 40px}


/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
  padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
  top: 0;
  bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
  padding: 0;
}

/***** MOBILE *****/
@media (max-width: 767.98px) {
  .blackbar {height: 130px}
  .mobile {display: block !important}
  .nomobile {display: none !important}
  .card {padding: 0 24px 24px 24px; margin-top: 32px}
  .card h1 {font-size: 50px; line-height: 40px}
  .card .content li {display: block}
  .card .contact li img {margin-right: 0; width: 100%; height: auto}
  .card .contact li {width:20%; box-sizing: border-box; padding: 3%}
  .card .content ul {display: block}
  .text {text-align: center}
  .text li {float: left}
  .hero {width: 100%; text-align: center}
  .hero img {float: none; padding-left: 15px; height: 230px; padding: 20px; margin-top: 0}
  .intro p {padding: 0}
  .intro {width: 100%; padding: 16px 24px; font-size: 20px; line-height: 26px; margin-bottom: 40px; padding: 24px 0}
  .container {padding-left: 0; width: 100%; margin-bottom: 40px}
  .container.right {left: 0%;}
  .container.left::after, .container.right::after {left: 14px}
  .timeline {margin-top: 40px; margin-bottom: 0}
  .timeline .container .content {margin-right: 0; border-bottom: 1px solid #ccc; padding-bottom: 24px}
  .timeline .containter:last-child .content {border-bottom: none}
  .container.right .content {margin-left: 0}
  #about h2 {width: 100%; text-align: center}
  #about li {margin-right: 12px}
  #about li a {margin-right: 12px}
  .profile {width: 100%; text-align: center; margin-bottom: 16px}
  .profile img {width: 120px}
  .abouttext {width: 100%}
  .timeline::after, .container::after {display: none}
  .timeline .container:last-child .content {border-bottom: none; padding-bottom: 0}
  .container.left .date {text-align: left}
  .pagenotfound {font-size: 20px}
  .pagenotfound h1 {font-size: 32px}
  .pagenotfound a {margin-top: 16px; float: left; width: 100%}
  .pagenotfound img {width: 100px; height: auto}
  .interview {line-height: 28px}
  .interview .card {margin-bottom: 30px}
  .interview .card h1 {font-size: 35px; line-height: 40px}
  .pagenotfound p img {height: auto; width: 100%}
}


/**** DARK THEME ****/
@media (prefers-color-scheme: dark) {
body {background: #000; color: #dedede}
a {color: #69B1FF}
.blackbar {background: #333}
.card {background: #222}
.tooltip .tooltiptext {color: #dedede; background: #444;}
.tooltip .tooltiptext::after {border-color: transparent transparent #444 transparent;}
.intro {background: #000; border-top: 1px solid #fff; border-bottom: 1px solid #dedede}
.timeline::after {background: #dedede}
.container::after {background: #dedede; border: 4px solid #000}
.container .date {color: #9a9a9a}
#about {background: #222}
.collapsible {background-color: #494949; color: #fff}
.collapsible:hover {background-color: #333; color: #fff}
.collapsible:after {color: #dedede}
}


/**** RETRO THEME ****/
.retro {background:#000; color: #00D400; font-family: 'classic_console'; background: radial-gradient(#333, #000); background-attachment: fixed; background-size: cover;}
.retro .card {background: none; box-shadow: none;}
.retro #about {background: none}
.retro .blackbar {display: none}
.retro .timeline {font-size: 20px}