/*
 * A theme for reveal.js presentation
 * Author: Amy Spielmaker
 * URL: https://akspiel.com
*/
/*********************************************
	GLOBAL STYLES
*********************************************/
*, ::before, ::after {
  box-sizing: border-box;
}
:root {
  --font-sans: 'Mulish', sans-serif;
  --font-mono: 'Source Code Pro', monospace;
  --color-green: #a1bf36;
  --color-blue-dark: #0a3a4a;
  --color-blue-background: #015760;
  --color-blue-background-light: #64b0ba;
  --color-links: #32a6a6;
  --color-links-hover: #1d7f7d;
  --color-orange: #c9714b;
  --color-salmon: #c9944b;
  --color-blush: #fff2eb;
  --color-text: #4b4b4b;
  --color-pre: #F5F5F5;
  --frame: 60px;
	--padding: 50px;
}
@media (min-height: 1001px) and (min-width: 1500px) {
  :root {
    --frame: 100px;
		--padding: 70px;
  }
}
@media (min-width: 1899px) {
  :root {
    --frame: 100px;
		--padding: 70px;
  }
}
@media (min-width: 1999px) {
  :root {
    --frame: 10vh;
		--padding: 7vh;
  }
}
@media (min-width: 1999px) and (min-height: 1049px) {
  :root {
		--padding: 70px;
  }
}
@media (max-height: 801px) and (max-width: 801px) {
  :root {
    --frame: 40px;
  }
}
@media (max-width: 1099px) and (max-height: 799px) {
  :root {
    --padding: 30px;
  }
}
@media (max-width: 899px) and (orientation: portrait) {
	:root {
    --padding: 30px;
  }
	:root {
    --frame: 50px;
  }
}
@media (max-width: 749px) {
	:root {
    --frame: 20px;
		--padding: 20px;
  }
}
html {
  font-size: 18px;
}
body {
  background-color: var(--color-blue-background-light);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.3;
}
.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/*********************************************
	TEXT
*********************************************/
h1, h2, h3, h4, h5, h6 {
  margin: 1em 0 .5em 0;
  font-family: var(--font-mono);
  line-height: 1;
}
h1 {
  font-size: 6.5rem;
}
h2 {
  font-size: 3.5rem;
}
h3 {
  font-family: var(--font-sans);
  font-size: 1.17rem;
}
a {
  transition: all .2s;
}
a, a:link, a:visited {
  color: var(--color-links);
}
a:hover, a:focus {
  color: var(--color-links-hover);
}
p, ul, ol {
  margin: 0 0 1em 0;
  font-size: 1.8rem;
}
ul, ol {
  padding-left: 2.5rem;
}
li {
  margin-bottom: 5px;
}
pre {
  margin: 0 0 1.5rem 0;
  white-space: normal;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}
p:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, ol:last-child, ul:last-child, li:last-child, pre {
  margin-bottom: 0;
}
blockquote {
  margin: 0;
}
.aks-title-space {
  font-size: .8em;
}
table {
  border-collapse: collapse;
}
sup {
  vertical-align: top;
  line-height: 1;
}
.aks-ext-icon {
  display: inline-block;
  width: 0.8em;
  position: relative;
  right: -0.35em;
}
.aks-ext-icon svg {
  fill: currentcolor;
}
/*********************************************
	MEDIA
*********************************************/
img, video, svg {
  vertical-align: middle;
	max-width: 100%;
}
figure {
  margin: 0;
}
/*********************************************
	CONTAINERS
*********************************************/
.slides section {
  top: var(--frame);
  left: var(--frame);
  height: calc(100% - 2*var(--frame));
  width: calc(100% - 2*var(--frame));
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: #fff;
  padding: var(--padding);
}
.slides section section {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: none;
}
.aks-slide-inner {
  height: 100%;
}
.aks-slide-inner::-webkit-scrollbar {
  width: 12px;
}
.aks-slide-inner::-webkit-scrollbar-thumb {
  border: 2px solid #f2f2f2;
  background-color: #6a737b;
  border-radius: 20px;
}
.aks-slide-inner::-webkit-scrollbar-track {
  background: #f2f2f2;
}
/*********************************************
	SLIDE CONTROLS
*********************************************/
.reveal .controls {
  right: var(--frame);
  --control-height: 40px;
  bottom: calc(0.5*(var(--frame) - var(--control-height)));
  height: var(--control-height);
  width: calc(4*var(--control-height));
  display: flex !important;
  justify-content: flex-end;
}
.reveal .controls button {
  width: var(--control-height);
  height: var(--control-height);
  border-radius: 100%;
  position: relative;
}
.reveal .controls .navigate-right {
  order: 1;
}
.reveal .controls .controls-arrow::after, 
.reveal .controls .controls-arrow::before {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: #fff;
  top: calc(50% - 2px);
  left: calc(50% - 10px);
}
.reveal .controls .controls-arrow {
  width: 100%;
  height: 100%;
}
.reveal .controls .controls-arrow::before {
  transform: rotate(45deg) !important;
}
.reveal .controls .controls-arrow::after {
  transform: rotate(-45deg) !important;
}
.reveal .controls button:hover .controls-arrow::before {
  transform: rotate(40deg) !important;
}
.reveal .controls button:hover .controls-arrow::after {
  transform: rotate(-40deg) !important;
}
/*********************************************
	FOOTER AND CONTACT LIST
*********************************************/
#footer {
  position: fixed;
  left: var(--frame);
  bottom: 0;
  height: var(--frame);
  color: #D8E2E7;
  display: none;
	z-index: 10;
}
body:not(.aks-opening) #footer {
  display: flex;
}
.aks-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  display: flex;
  justify-content: right;
  align-items: center;
}
.aks-contact-list li {
  margin: 0;
}
.aks-contact-list li:first-child {
  margin-right: 10px;
  padding-right: 13px;
  position: relative;
}
.aks-contact-list li:first-child::after {
  background-color: rgba(255,255,255,.5);
  bottom: 3px;
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  width: 1px;
}
.aks-contact-list li:not(:first-child):not(:last-child) {
  margin-right: 7px;
}
.aks-contact-list li a {
  display: flex;
  padding: 5px;
  position: relative;
  width: 28px;
  color: #D8E2E7;
}
.aks-contact-list .aks-contact-single-web a {
  top: .5px;
}
.aks-contact-list .aks-contact-single-email a {
  top: 1px;
  width: 30px;
}
.aks-contact-list .aks-contact-single-linkedin a {
  width: 26px;
}
.aks-contact-list .aks-contact-single-codepen a {
  top: 1px;
}
.aks-contact-list .aks-contact-single-github a {
  top: 1px;
}
.aks-contact-list .aks-contact-single-pixa a {
  top: 1px;
  width: 29px;
}
.aks-contact-list li a svg {
  fill: currentcolor;
  transition: inherit;
  width: 100%;
}
.aks-contact-list li a:hover svg {
  color: #fff;
}
.aks-tooltip {
  background-color: #444;
  border-radius: 3px;
  bottom: calc(100% + 2px);
  color: #fff;
  font-size: .8rem;
  left: calc(50% - 38px);
  opacity: 0;
  padding: 5px;
  position: absolute;
  text-align: center;
  transform: translateY(0);
  transition: all .25s ease-in-out;
  visibility: hidden;
  width: 76px;
}
.aks-tooltip::after {
  border-color: #444 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  bottom: -5px;
  content: "";
  height: 0;
  left: calc(50% - 5px);
  position: absolute;
  width: 0;
}
.aks-contact-list li a:focus .aks-tooltip, 
.aks-contact-list li a:hover .aks-tooltip {
  opacity: 1;
  transform: translateY(-2px);
  transition-delay: .2s;
  visibility: visible;
}
/*********************************************
	TITLE SLIDE
*********************************************/
.slides section.aks-slide-welcome {
  background-color: transparent;
  box-shadow: none;
}
.slides section.aks-slide-welcome .aks-slide-inner {
  overflow: visible;
  position: relative;
  display: flex;
  align-items: center;
}
.aks-slide-welcome .aks-text {
  background-color: #fff;
  padding: 50px 100px 60px 60px;
  width: 60%;
  position: relative;
}
.aks-slide-welcome .aks-text-inner {
  position: relative;
  z-index: 10;
}
.aks-slide-welcome .aks-text .aks-title-top {
  color: var(--color-green);
  margin-bottom: 10px;
  position: relative;
  left: -5px;
}
.aks-slide-welcome .aks-text .aks-title-bottom {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.2;
}
.aks-slide-welcome .aks-text::before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #000;
  box-shadow: 0 15px 10px #000;
  transform: rotate(-3deg);
}
/* CONTACT LIST ON OPENING SLIDE */
.aks-contact-wrapper-slide-1 .aks-contact-list li a {
  color: inherit;
}
.aks-contact-wrapper-slide-1 .aks-contact-list {
  justify-content: left;
}
.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child::after {
  background-color: rgba(0,0,0,.2);
}
.aks-contact-wrapper-slide-1 .aks-contact-list li a:hover svg {
  color: var(--color-links-hover);
}
/*********************************************
	BIG SECTION HEADERS
*********************************************/
.aks-section-header .aks-slide-inner {
  display: flex;
  align-items: flex-end;
	overflow: visible;
}
.aks-section-header .aks-gear-back {
  position: absolute;
  background-image: url(https://assets.codepen.io/1997267/gear-back-v2.svg);
  opacity: 0.4;
  background-repeat: no-repeat;
  width: 45%;
  top: calc(-2*var(--frame));
	right: calc(-2*var(--frame));
	bottom: calc(-2*var(--frame));
  background-size: contain;
  background-position: center;
}
.aks-section-header .aks-section-title {
  margin: 0;
  color: var(--color-green);
  font-size: 10rem;
  position: relative;
  mix-blend-mode: multiply;
	padding-right: 20%;
}
/*********************************************
	CHECKLIST
*********************************************/
.aks-checklist  {
  list-style: none;
  padding-left: 0;
}
.aks-checklist li {
  position: relative;
  display: grid;
  gap: 10px;
  grid-template-columns: 32px auto;
	color: #dcdcdc;
	transition: all .2s;
}
.aks-checklist li em {
  display: block;
  font-size: .65em;
}
.aks-checklist li:not(:last-child) {
  margin-bottom: 10px;
}
.aks-checklist li::before {
  content: "";
  border: 3px solid #dcdcdc;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  flex-grow: 0;
  background-color: #fff;
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  top: 5px;
}
.aks-check-line {
  position: absolute;
  left: 14px;
  width: 3px;
  background-color: var(--color-green);
  top: 15px;
  bottom: -15px;
  transition: all .2s;
  transform-origin: top;
	transform: scaleY(0);
}
.aks-checklist .aks-check {
  transform-origin: center;
  transition: all .2s;
  position: relative;
  width: 32px;
  height: 32px;
  z-index: 5;
  grid-column: 1;
  grid-row: 1;
  display: block;
  top: 5px;
	transform-origin: center;
	transform: scale(0);
}
.aks-checklist .aks-check::after {
  content: "";
  width: 10px;
  height: 15px;
  border-bottom: 3px solid var(--color-green);
  border-right: 3px solid var(--color-green);
  top: calc(50% - 9px);
  left: 10px;
  position: absolute;
  transform: rotate(35deg);
}
.aks-anim-run .aks-checklist {
	--anim-length: .3s;
}
.aks-anim-run .aks-checklist .aks-check-line {
	animation: growdown var(--anim-length) 1 forwards;
}
.aks-anim-run .aks-checklist .aks-check {
	animation: growout var(--anim-length) 1 forwards;
}
.aks-anim-run .aks-checklist li {
	animation: color-gray-text var(--anim-length) 1 forwards;
}
.aks-anim-run .aks-checklist li::before {
	animation: color-gray-green var(--anim-length) 1 forwards;
}
.aks-anim-run .aks-checklist li:nth-child(2) .aks-check-line,
.aks-anim-run .aks-checklist li:nth-child(2) .aks-check,
.aks-anim-run .aks-checklist li:nth-child(2),
.aks-anim-run .aks-checklist li:nth-child(2)::before {
	animation-delay: var(--anim-length);
}
.aks-anim-run .aks-checklist li:nth-child(3) .aks-check-line,
.aks-anim-run .aks-checklist li:nth-child(3) .aks-check,
.aks-anim-run .aks-checklist li:nth-child(3),
.aks-anim-run .aks-checklist li:nth-child(3)::before {
	animation-delay: calc(2*var(--anim-length));
}
.aks-anim-run .aks-checklist li:nth-child(4) .aks-check-line,
.aks-anim-run .aks-checklist li:nth-child(4) .aks-check,
.aks-anim-run .aks-checklist li:nth-child(4),
.aks-anim-run .aks-checklist li:nth-child(4)::before {
	animation-delay: calc(3*var(--anim-length));
}
.aks-anim-run .aks-checklist li:nth-child(5) .aks-check-line,
.aks-anim-run .aks-checklist li:nth-child(5) .aks-check,
.aks-anim-run .aks-checklist li:nth-child(5),
.aks-anim-run .aks-checklist li:nth-child(5)::before {
	animation-delay: calc(4*var(--anim-length));
}
@keyframes growdown {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes growout {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes color-gray-text {
  0% {
    color: #dcdcdc;
  }
  100% {
    color: var(--color-text);
  }
}
@keyframes color-gray-green {
  0% {
    border-color: #dcdcdc;
  }
  100% {
    border-color: var(--color-green);
  }
}
/*********************************************
	SLIDE STYLE TWO COLUMN TITLE LEFT
*********************************************/
.aks-slide.aks-slide-style-title-left {
  padding: 0;
}
.aks-slide-style-title-left .aks-slide-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.aks-slide-style-title-left .aks-slide-inner .aks-col-single {
  padding: var(--padding);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.aks-slide-style-title-left .aks-slide-inner .aks-col-single-1 {
  background-color: rgba(161, 191, 54, .3);
}
.aks-slide-style-title-left .aks-title {
  font-size: 4.5rem;
  line-height: 1.1;
  position: relative;
  z-index: 5;
  margin: 0;
  font-family: var(--font-sans);
}
.aks-slide-style-title-left .aks-gears-side {
  position: absolute;
  width: 100%;
  opacity: .2;
}
.aks-slide-style-title-left .aks-gears-side-top {
  fill: #A5AE84;
  top: -45%;
  right: -27%;
}
.aks-slide-style-title-left .aks-gears-side-bottom {
  fill: #60693F;
  bottom: -45%;
  left: -26%;
}
.aks-slide-style-title-left .aks-gears-side-bottom svg {
  transform: rotate(10deg);
}
/*********************************************
	SLIDE STYLE BASIC
*********************************************/
.aks-slide-style-basic .aks-title {
	margin: 0;
}
.aks-slide-style-basic .aks-slide-content-wrapper {
	padding: calc(.5*var(--padding)) 0 0 0;
}
/*********************************************
	SLIDE STYLE SMALL TITLE
*********************************************/
.aks-slide-style-small-title {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.aks-slide-style-small-title .aks-slide-content-wrapper {
	padding: var(--padding) 0;
}
.aks-slide-style-small-title .aks-title {
  background-color: rgba(157, 176, 183, .6);
  padding: 20px var(--padding);
  font-family: var(--font-sans);
  font-size: 1.17rem;
  margin-left: calc(-1*var(--padding));
  margin-right: calc(-1*var(--padding));
  line-height: 1.1;
  margin-bottom: 0;
}
/*********************************************
	CODEPEN EMBED SLIDES
*********************************************/
.aks-slide-style-codepen {
  padding: 0 !important;
}
.aks-slide-style-codepen .aks-title {
  display: flex;
  align-items: center;
  margin: 0;
  height: 50px;
  position: absolute;
  top: 0;
  padding: 0 12px;
  color: #fff;
}
.aks-slide-style-codepen .aks-codepen-wrapper {
  height: 100%;
}
.aks-slide-style-codepen .aks-codepen-wrapper .cp_embed_wrapper {
  overflow: hidden;
  background: #28282a;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}
.aks-slide-style-codepen .aks-codepen-wrapper .cp_embed_wrapper iframe {
  height: 100%;
}
/*********************************************
	CODE VOCAB SLIDES
*********************************************/
.aks-pre {
  font-size: 1.5rem;
  padding: 27px 20px;
  background-color: var(--color-pre); 
  border-radius: 5px;
  display: block; 
  line-height: 1.5;
  position: relative;
}
.aks-pre .aks-language {
  background: rgba(157, 176, 183, .6);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1;
  position: absolute;
  right: 12px;
  top: 0;
}
.aks-output {
  padding: 0 16px;
}
/*********************************************
	SLIDE: SOME BASIC VOCAB
*********************************************/
.aks-slide-vocab-1 .aks-slide-inner {
	display: flex;
  flex-direction: column;
}
.aks-slide-vocab-1 .aks-slide-content-wrapper {
  flex: 1;
	overflow: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.aks-slide-vocab-1 .aks-slide-content-wrapper::-webkit-scrollbar {
  width: 12px;
}
.aks-slide-vocab-1 .aks-slide-content-wrapper::-webkit-scrollbar-thumb {
  border: 2px solid #f2f2f2;
  background-color: #6a737b;
  border-radius: 20px;
}
.aks-slide-vocab-1 .aks-slide-content-wrapper::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 20px;
}
.aks-slide-vocab-1 .aks-slide-content {
	display: flex;
  flex-direction: column;
  height: 100%;
}
.aks-slide-vocab-1 .aks-man-code-wrapper {
  display: flex;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
	flex: 1;
}
.aks-slide-vocab-1 .aks-col-single {
  padding: 80px 30px;
	flex: 1;
	align-self: center;
}
.aks-slide-vocab-1 .aks-col-single-2 {
  border-left: 1px solid #cdcdcd;
  display: flex;
  align-items: center;
	height: 100%;
}
/* code arrow labels */
.aks-codelabel {
  position: absolute; 
  white-space: nowrap;
  font-family: var(--font-sans);
  transform: translateX(-50%);
  left: 50%;
  font-weight: 700;
  font-size: 1.25rem;
}
.aks-codelabel-top {
  top: -90px;
}
.aks-codelabel-bottom {
  bottom: -90px;
}
/* code arrow */
.aks-code-arrow-down {
  position: absolute;
  height: 45px;
  width: 3px;
  bottom: -45px;
  background-color: currentColor;
  left: calc(50% - 1px);
}
.aks-arrow-tri {
  position: absolute;
  bottom: 0;
  background-color: currentColor;
  width: 20px;
  height: 3px;
  border-radius: 10px;
  left: calc(50% - 10px);
}
/* code arrow down */
.aks-code-arrow-down .aks-arrow-tri::before,
.aks-code-arrow-down .aks-arrow-tri::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 14px;
  background-color: currentColor;
  bottom: -8px;
  transform-origin: bottom;
  border-radius: 10px;
}
.aks-code-arrow-down .aks-arrow-tri::before {
  transform: rotate(-45deg);
  left: calc(50% - 1px);
}
.aks-code-arrow-down .aks-arrow-tri::after {
  transform: rotate(45deg);
  left: calc(50% - 2px);
}
/* code arrow up */
.aks-code-arrow-up {
  position: absolute;
  height: 45px;
  width: 3px;
  top: -45px;
  background-color: currentColor;
  left: calc(50% - 1px);
}
.aks-code-arrow-up .aks-arrow-tri {
  top: 0;
  bottom: auto;
}
.aks-code-arrow-up .aks-arrow-tri::before,
.aks-code-arrow-up .aks-arrow-tri::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 14px;
  background-color: currentColor;
  top: -8px;
  transform-origin: top;
  border-radius: 10px;
}
.aks-code-arrow-up .aks-arrow-tri::before {
  transform: rotate(45deg);
  left: calc(50% - 1px);
}
.aks-code-arrow-up .aks-arrow-tri::after {
  transform: rotate(-45deg);
  left: calc(50% - 2px);
}
/* code arrow right */
.aks-code-arrow-right {
  position: absolute;
  width: 45px;
  height: 3px;
  top: -45px;
  background-color: currentColor;
  right: 20px;
  top: calc(50% - 1.5px);
}
.aks-code-arrow-right .aks-arrow-tri {
  top: 0;
  bottom: auto;
  transform: rotate(90deg);
  left: calc(100% - 10px);
}
.aks-code-arrow-right .aks-arrow-tri::before,
.aks-code-arrow-right .aks-arrow-tri::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 14px;
  background-color: currentColor;
  top: -8px;
  transform-origin: top;
  border-radius: 10px;
}
.aks-code-arrow-right .aks-arrow-tri::before {
  transform: rotate(45deg);
  left: calc(50% - 1px);
}
.aks-code-arrow-right .aks-arrow-tri::after {
  transform: rotate(-45deg);
  left: calc(50% - 2px);
}
/* syntax highlighting */
.aks-code-piece {
  position: relative;
}
.aks-sepia {
  color: #137886;
}
.aks-olive {
  color: #096fb3;
}
.aks-wheat {
  color: #b94185;
}
.aks-white {
  color: var(--color-text);
}
.aks-lilac {
  color: #219;
}
.aks-yam {
  color: #137886;
}
/*********************************************
	SLIDE: WHAT DESIGN IS
*********************************************/
.aks-slide-what-design-is .aks-slide-inner {
	display: flex;
	flex-direction: column;
}
.aks-slide-what-design-is .aks-slide-content-wrapper {
	flex: 1;
}
.aks-slide-what-design-is .aks-slide-content {
  height: 100%;
  position: relative;
}
.aks-comparison {
  display: flex;
  gap: calc(.5*var(--padding));
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.aks-comparison figure {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.aks-comparison figcaption {
  padding: 18px 20px 0 20px;
  font-style: italic;
  position: relative;
}
.aks-comparison figcaption::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent currentcolor transparent;
}
/* web box */
.aks-web-box-wrapper {
  border-bottom: 5px solid #ddd;
  border-radius: 5px 5px 3px 3px;
  position: relative;
  box-shadow: 0 0.25em 0.5em -0.1em rgba(0, 0, 0, .3);
  flex: 1;
  min-height: 0;
}
.aks-web-box-inner {
  background-color: #fff;
  height: calc(100% - 30px);
  overflow: auto;
}
.aks-web-box-inner img {
  width: 100%;
  height: auto;
}
/* browser bar */
.aks-browserbar {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #ddd 0%, #c7c7c7 100%);
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #c7c7c7;
  border-top: 1px solid #e4e4e4;
  position: relative;
}
.aks-browserbar::before,
.aks-browserbar::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ebebeb;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.aks-browserbar::before {
  left: 15px;
  box-shadow: 15px 0 0 0 #ebebeb;
}
.aks-browserbar::after {
  left: 45px;
}
/* scrollbars */
.aks-web-box-inner::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 20px;
}
.aks-web-box-inner::-webkit-scrollbar {
  width: 12px;
}
.aks-web-box-inner::-webkit-scrollbar-thumb {
  border: 2px solid #f2f2f2;
  background-color: #6a737b;
  border-radius: 20px;
}
/*********************************************
	SLIDE: SOME ADDITIONAL VOCAB
*********************************************/
.aks-slide-vocab-2 .aks-slide-inner {
  display: flex;
  flex-direction: column;
}
.aks-slide-vocab-2 .aks-slide-content-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
}
.aks-slide-vocab-2 .aks-slide-content {
  height: 100%;
  min-height: 0;
  flex: 1;
}
.aks-slide-vocab-2 .aks-man-code-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.aks-slide-vocab-2 .aks-man-code-wrapper::-webkit-scrollbar {
  width: 12px;
}
.aks-slide-vocab-2 .aks-man-code-wrapper::-webkit-scrollbar-thumb {
  border: 2px solid #f2f2f2;
  background-color: #6a737b;
  border-radius: 20px;
}
.aks-slide-vocab-2 .aks-man-code-wrapper::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 20px;
}
.aks-slide-vocab-2 .aks-col-single-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex: 1;
  min-height: 0;
}
.aks-slide-vocab-2 .aks-pre {
  font-size: 1rem;
  margin: 16px;
}
.aks-slide-vocab-2 .aks-man-code-wrapper .aks-title-sub {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #cdcdcd;
}
.aks-slide-vocab-2 .aks-pre-html {
  margin-right: 0;
  overflow: auto;
}
.aks-slide-vocab-2 .aks-pre-css {
  overflow: auto;
}
.aks-slide-vocab-2 .aks-pre-inline {
  grid-column: 1 / 3;
}
.aks-slide-vocab-2 .aks-col-single {
  border: 1px solid #cdcdcd;
  border-radius: 5px;
	display: flex;
  flex-direction: column;
}
.aks-slide-vocab-2 .aks-col-1 {
  flex: 1;
}
.aks-slide-vocab-2 .aks-col-2 {
  flex: 1.3;
}
.aks-slide-vocab-2 .aks-output {
  padding: 20px 32px;
  border-left: 1px solid #cdcdcd;
}
/*********************************************
	SLIDE: FINDING LMS STYLES
*********************************************/
.aks-inspect-info-click {
  position: relative;
  display: inline-block;
  padding-right: 75px;
}
/*********************************************
	SLIDE: BENEFITS OF EXTERNAL CSS
*********************************************/
.aks-css-disclaim {
  margin-bottom: 0;
  margin-top: 1em;
}
/*********************************************
	SLIDE: LMS CSS POWERS
*********************************************/
.aks-slide-style-small-title.aks-slide-css-power-levels .aks-slide-content-wrapper {
	padding-top: calc(var(--padding) - 15px);
}
.aks-slide-css-power-levels .aks-slide-inner {
	display: flex;
	flex-direction: column;
}
.aks-slide-css-power-levels .aks-slide-content-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
}
.aks-slide-css-power-levels .aks-slide-content {
  height: 100%;
  min-height: 0;
  flex: 1;
	display: flex;
  flex-direction: column;
	gap: calc(.5*var(--frame));
}
.aks-lms-table-wrapper {
  overflow: auto;
  padding-right: 10px;
  margin-right: -10px;
}
.aks-lms-table-wrapper::-webkit-scrollbar {
  width: 12px;
}
.aks-lms-table-wrapper::-webkit-scrollbar-thumb {
  border: 2px solid #f2f2f2;
  background-color: #6a737b;
  border-radius: 20px;
}
.aks-lms-table-wrapper::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 20px;
}
.aks-lms-table {
  width: 100%;
}
.aks-lms-table th,
.aks-lms-table td {
  padding: 10px;
  text-align: left;
}
.aks-lms-table ul {
  font-size: inherit;
  padding-left: 0;
}
.aks-lms-table ul li {
  display: flex;
	gap: 3px;
}
.aks-lms-table ul li::before {
  content: "";
  width: 30px;
  height: 30px;
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
	flex-shrink: 0;
  flex-grow: 0;
}
.aks-lms-table .aks-yes::before {
  background-image: url(https://assets.codepen.io/1997267/lms-check-v2.svg);
}
.aks-lms-table .aks-no::before {
  background-image: url(https://assets.codepen.io/1997267/lms-x-v2.svg);
  background-size: 19px;
}
.aks-lms-table .aks-yesish::before {
  background-image: url(https://assets.codepen.io/1997267/lms-half-v2.svg);
	position: relative;
	top: -1.5px;
}
.aks-lms-table tr {
  border-bottom: 1px solid #ddd;
}
.aks-lms-table tr:first-child {
  border-bottom: 3px solid rgba(157, 176, 183, .6);
}
.aks-lms-table tr:first-child th:first-child {
  width: 30%;
}
.aks-lms-table tr:first-child th:nth-child(2) {
  width: 25%;
}
.aks-lms-table tr:not(:first-child):hover {
  background-color: rgba(157, 176, 183, .3);
}
.aks-lms-admin-info {
  background-color: rgba(161, 191, 54, .3);
  padding: 30px;
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
.aks-lms-table,
.aks-lms-admin-info p,
.aks-lms-admin-info .aks-title-sub {
  font-size: 1.25rem;
}
/*********************************************
	SLIDE: KEEP LEARNING
*********************************************/
.aks-resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-column-gap: 30px;
}
.aks-resource-list a {
  display: inline-flex;
  gap: 15px;
}
.aks-link-arrow-wrapper {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 1;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative; 
  top: 0;
}
.aks-link-arrow-wrapper svg {
  fill: currentcolor;
  position: relative;
  transition: all .2s;
  left: 0;
}
a:hover .aks-link-arrow-wrapper svg {
  left: 5px;
}
.aks-resource-list .aks-chat-box {
  margin: 0; 
  padding: 27px 30px 30px 30px; 
  background-color: whitesmoke;
  margin-top: 0;
  grid-column: 2;
  grid-row: 1 / 8;
  align-self: start;
}
.aks-chat-box > span {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
  font-size: 2rem;
  line-height: 1;
}
.aks-chat-box ul li:not(:last-child) {
  margin-bottom: 7px;
}
.aks-contact-wrapper-slide-last {
	display: none;
}
/*********************************************
 * MEDIA QUERIES
 *********************************************/
@media (min-width: 1449px) and (max-height: 1000px) {
	/* font */
	.aks-section-header .aks-section-title {
		font-size: 8rem;
	}
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 1.45rem;
	}
}
@media (min-width: 1449px) {
	/* font */
	h1 {
		font-size: 7.5rem;
	}
}
@media (min-width: 1599px) {
	/* font */
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 1.5rem;
	}
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 2rem;
	}
	/* gears on first slide */
	#gears {
		transform: scale(1.3);
		transform-origin: right center;
	}
}
@media (min-width: 1899px) {
	/* font */
	h1 {
		font-size: 10.5rem;
	}
	.aks-css-disclaim, p, ul, ol {
		font-size: 2rem;
	}
	.aks-lms-admin-info p, .aks-lms-admin-info .aks-title-sub, .aks-lms-table {
		font-size: 1.5rem;
	}
	/* gears on first slide */
	#gears {
		transform: scale(1.5);
	}
	/* keep learning slide */
	.aks-link-arrow-wrapper {
		width: 35px;
		height: 35px;
	}
	/* contact info list */
	.aks-contact-list {
		font-size: 1.25rem;
	}
	.aks-contact-list li a {
		width: 32px;
	}
	.aks-contact-list .aks-contact-single-email a {
		width: 34px;
	}
	.aks-contact-list .aks-contact-single-linkedin a {
		width: 30px;
	}
	.aks-contact-list .aks-contact-single-pixa a {
		width: 33px;
	}
	.aks-contact-list li:not(:first-child):not(:last-child) {
		margin-right: 10px;
	}
	.aks-contact-list li:first-child {
		margin-right: 15px;
		padding-right: 18px;
	}
}
@media (min-width: 1999px) and (min-height: 1049px) {
	/* slides overall */
  .slides section {
		width: 1500px;
		height: 900px;
		top: calc((100vh - 900px)/2);
		left: calc((100vw - 1500px)/2);
	}
	/* footer and controls */
	.reveal .controls, #footer {
		height: 50px;
		bottom: calc((100vh - 900px)/2);
		transform: translateY(150%);
	}
	.reveal .controls {
		right: calc((100vw - 1500px)/2);
	}
	#footer {
		left: calc((100vw - 1500px)/2);
	}
	/* font */
	h1 {
		font-size: 9rem;
	}
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 1.8rem;
	}
	/* section headers */
	.aks-section-header .aks-gear-back {
		width: 100%;
		top: calc((-100vh + 900px)/2);
		right: calc((-100vw + 1500px)/2);
		bottom: calc((-100vh + 900px)/2);
	}
	/* first slide */
	.slides section.aks-slide-welcome {
		padding: 0;
	}
	/* what design is slide */
	.aks-comparison {
		gap: 50px;
	}
	/* power levels slide */
	.aks-slide-css-power-levels .aks-slide-content {
		gap: 50px;
	}
	/* keep learning slide */
	.aks-resource-list {
		grid-row-gap: 5px;
		grid-column-gap: 50px;
	}
}
@media (max-height: 800px) {
	/* font */
	p, ul, ol {
		font-size: 1.5rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 3.5rem;
	}
	.aks-slide-style-basic .aks-title {
		font-size: 3rem;
	}
	.aks-section-header .aks-section-title {
		font-size: 8rem;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-output {
		padding: 0;
	}
	.aks-slide-vocab-1 .aks-pre {
		font-size: 1.25rem;
	}
	.aks-slide-vocab-1 .aks-codelabel {
		font-size: 1rem;
	}
	/* checklists */
	.aks-checklist li::before,
	.aks-checklist .aks-check	{
		top: 1px;
	}
}
@media (max-width: 1299px) {
	/* font */
	h1 {
		font-size: 6rem;
	}
	.aks-section-header .aks-section-title {
		font-size: 6rem;
	}
}
@media (max-width: 1279px) {
	/* second vocab slide */
	.aks-slide-vocab-2 code > div {
		white-space: unset !important;
	}
}
@media (max-width: 1299px) and (min-height: 900px) {
	/* font */
	.aks-section-header .aks-section-title {
		font-size: 8rem;
	}
}
@media (max-width: 1299px) and (min-width: 1199px) and (max-height: 800px) {
	/* font */
	p, ul, ol {
		font-size: 1.4rem;
	}
	.aks-title-bottom {
		font-size: 1.2rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 3.5rem;
	}
	.aks-slide-style-basic .aks-title {
		font-size: 3rem;
	}
	.aks-section-title {
		font-size: 8rem;
	}	
	.aks-lms-table,
	.aks-lms-admin-info p,
	.aks-lms-admin-info .aks-title-sub {
		font-size: 1.1rem;
	}
	/* power levels slide */
	.aks-lms-table ul li::before {
		width: 28px;
		height: 28px;
		background-size: 20px;
	}
	.aks-lms-table .aks-no::before {
		background-size: 17px;
	}	
	/* checklists */
	.aks-checklist li::before {
		width: 30px;
		height: 30px;
		top: 2px;
	}
	.aks-checklist .aks-check {
		top: 2px;
	}
	.aks-check-line {
		position: absolute;
		left: 13px;
	}
	/* keep learning slide */
	.aks-chat-box > span {
		font-size: 1.5rem;
	}
	.aks-link-arrow-wrapper {
		width: 28px;
		height: 28px;
	}
	.aks-resource-list a {
		gap: 10px;
	}
	/* vocab code slides */
	.aks-output {
		padding: 0;
	}
	.aks-pre {
		font-size: 1.2rem;
	}
	/* first vocab code slide */
	.aks-codelabel {
		font-size: 1rem;
	}
	.aks-codelabel-top {
		top: -75px;
	}
	.aks-codelabel-bottom {
		bottom: -75px;
	}
	.aks-code-arrow-down {
		height: 35px;
		bottom: -35px;
	}
	.aks-code-arrow-up {
		height: 35px;
		top: -35px;
	}
	.aks-slide-vocab-1 .aks-col-single {
		padding: 65px 30px;
	}
	/* what design is slide */
	.aks-comparison figcaption {
		font-size: .9rem
	}
	.aks-comparison figcaption::before {
		top: 22px;
	}
}
@media (max-width: 1099px) and (max-height: 799px) {
	/* font */
	h1 {
		font-size: 5rem;
	}
	p, ul, ol {
		font-size: 1.3rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 3rem;
	}
	/* first slide */
	.slides section.aks-slide-welcome {
		padding: 0;
	}
	.aks-slide-welcome .aks-text {
		padding: 40px 100px 50px 50px;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-pre {
		font-size: 1rem;
	}
	.aks-slide-vocab-1 .aks-col-single {
		padding: 50px 30px;
	}
	/* checklists */
	.aks-checklist li::before,
	.aks-checklist .aks-check	{
		width: 30px;
		height: 30px;
		top: 0;
	}
	.aks-check-line {
		left: 13px;
	}
	/* keep learning slide */
	.aks-chat-box > span {
		font-size: 1.75rem;
	}
}
@media (max-width: 899px) and (orientation: landscape) {
	/* font */
	h1 {
		font-size: 3.7rem;
	}
	p, ul, ol {
		font-size: 1.1rem;
	}
	.aks-lms-table,
	.aks-lms-admin-info p,
	.aks-lms-admin-info .aks-title-sub {
		font-size: 1rem;
	}
	.aks-slide-style-basic .aks-title {
		font-size: 2.5rem;
	}
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 1rem;
	}
	.aks-section-header .aks-section-title {
		font-size: 5rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 2.5rem;
	}
	/* contact list */
	.aks-contact-list {
		font-size: .9rem;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list {
		flex-wrap: wrap;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
		margin-bottom: 5px;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child::after {
		display: none;
	}
	.aks-slide-welcome .aks-text {
		padding: 28px 80px 30px 30px;
	}
	.aks-contact-list li a {
		width: 26px;
	}
	.aks-contact-list .aks-contact-single-email a {
		width: 28px;
	}
	.aks-contact-list .aks-contact-single-linkedin a {
		width: 24px;
	}
	.aks-contact-list .aks-contact-single-pixa a {
		width: 27px;
	}
	.aks-contact-list li:not(:first-child):not(:last-child) {
		margin-right: 5px;
	}
	/* checklists */
	.aks-checklist li {
		grid-template-columns: 26px auto;
	}
	.aks-checklist li::before, .aks-checklist .aks-check {
		width: 26px;
		height: 26px;
	}
	.aks-checklist li::before {
		border-width: 2px;
	}
	.aks-checklist .aks-check::after {
		border-bottom: 2px solid var(--color-green);
		border-right: 2px solid var(--color-green);
		width: 7px;
		height: 13px;
		top: calc(50% - 8px);
		left: 9.5px;
	}
	.aks-check-line {
		left: 11.5px;
		width: 2px;
	}
	.aks-checklist li em {
		display: unset;
	}
	/* first slide */
	#gears {
		transform: scale(.7);
		transform-origin: right center;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-man-code-wrapper {
		flex-direction: column;
	}
	.aks-slide-vocab-1 .aks-col-single {
		width: 100%;
	}
	.aks-slide-vocab-1 .aks-col-single-1 {
		padding: 80px 30px;
	}
	.aks-slide-vocab-1 .aks-col-single-2 {
		border-top: 1px solid #cdcdcd;
		border-left: none;
		padding: 40px 30px;
	}
	.aks-slide-vocab-1 .aks-output > div:first-child {
		font-size: 1.5rem !important;
	}
	.aks-slide-vocab-1 .aks-output > div:last-child {
		font-size: 1rem !important;
	}
	/* what design is slide */
	.aks-comparison figcaption {
		font-size: .9rem;
	}
	/* css powers slide */
	.aks-lms-admin-info {
		padding: 20px;
	}
	.aks-lms-table tr:first-child th:first-child {
		width: 25%;
	}
	.aks-lms-table tr:first-child th:nth-child(2) {
		width: 30%;
	}
	.aks-lms-table ul li::before {
		width: 26px;
		height: 26px;
		background-size: 18px;
	}
	.aks-lms-table .aks-no::before {
		background-size: 15px;
	}
	/* second vocab slide */
	.aks-slide-vocab-2 .aks-output {
		padding: 16px;
	}
	.aks-slide-vocab-2 .aks-col-2 .aks-col-single-inner {
		grid-template-columns: 2fr 1fr;
	}
	.aks-slide-vocab-2 .aks-col-2 .aks-col-single-inner .aks-pre-html {
		grid-column: 1;
		margin-right: 16px;
		margin-bottom: 0;
	}
	.aks-slide-vocab-2 .aks-col-2 .aks-col-single-inner .aks-pre-css {
		grid-column: 1;
	}
	.aks-slide-vocab-2 .aks-col-2 .aks-col-single-inner .aks-output {
		grid-column: 2;
		grid-row: 1 / 3;
	}
	/* keep learning slide */
	.aks-chat-box > span {
		font-size: 1.3rem;
	}
	.aks-link-arrow-wrapper {
		width: 25px;
		height: 25px;
	}
	.aks-resource-list a {
		gap: 10px;
	}
}
@media (max-width: 1099px) and (orientation: portrait) {
	/* font */
	h1 {
		font-size: 4.5rem;
	}
	/* first slide */
	.aks-slide.aks-slide-welcome {
		padding: 0 !important;
	}
	/* title on the left format */
	.aks-slide-style-title-left .aks-slide-inner {
		grid-template-columns: 1fr;
	}
	.aks-section-header .aks-gear-back {
		width: 100%;
		opacity: .2;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-man-code-wrapper {
		flex-direction: column;
	}
	.aks-slide-vocab-1 .aks-col-single {
		width: 100%;
	}
	.aks-slide-vocab-1 .aks-col-single-2 {
		border-top: 1px solid #cdcdcd;
		border-left: none;
	}
	.aks-slide-vocab-1 .aks-col-single-1 {
		display: flex;
		align-items: center;
	}
	.aks-slide-vocab-1 .aks-col-single-1 .aks-pre {
		width: 100%;
	}
	/* what design is slide */
	.aks-comparison {
		flex-direction: column;
		gap: 20px;
	}
	.aks-comparison-single {
		height: calc(50% - 10px);
	}
	/* second vocab slide */
	.aks-slide-vocab-2 .aks-col-single-inner,
	.aks-slide-vocab-2 .aks-col-single-inner {
		grid-template-columns: 1.5fr 1fr;
	}
	.aks-slide-vocab-2 .aks-pre-inline {
		grid-column: 1;
	}
	.aks-slide-vocab-2 .aks-output {
		grid-column: 2;
	}
	.aks-slide-vocab-2 .aks-pre-html {
		margin-right: 16px;
		margin-bottom: 0;
		grid-column: 1;
		grid-row: 1;
	}
	.aks-slide-vocab-2 .aks-pre-css {
		grid-column: 1;
		grid-row: 2;
	}
	.aks-slide-vocab-2 .aks-output {
		grid-column: 2;
	}
	.aks-slide-vocab-2 .aks-col-2 .aks-output {
		grid-row: 1 / 3;
	}
	/* css powers slide */
	.aks-lms-table tr:first-child th:first-child {
		width: 20%;
	}
	.aks-lms-table tr:first-child th:last-child {
		width: 30%;
	}
	/* keep learning slide */
	.aks-resource-list {
		display: block;
	}
	.aks-resource-list li:not(:last-child) {
		margin-bottom: 7px;
	}
	.aks-resource-list .aks-chat-box {
		margin-top: calc(.5*var(--padding));
	}
}
@media (max-width: 1099px) and (min-height: 800px) and (max-height: 1099px) {
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-man-code-wrapper {
		flex-direction: column;
	}
	.aks-slide-vocab-1 .aks-col-single {
		width: 100%;
	}
	.aks-slide-vocab-1 .aks-col-single-1 {
		display: flex;
		align-items: center;
	}
	.aks-slide-vocab-1 .aks-col-single-1 .aks-pre {
		width: 100%;
	}
	.aks-slide-vocab-1 .aks-col-single-2 {
		border-top: 1px solid #cdcdcd;
		border-left: 0;
		padding: 50px 30px;
	}
}
@media (max-width: 999px) {
	.aks-slide-style-codepen .aks-title {
		font-size: 1rem;
		padding-right: 215px;
	}
}
@media (max-width: 1149px) and (min-width: 1000px) and (max-height: 900px) and (min-height: 800px) {
	/* font */
	p, ul, ol {
		font-size: 1.5rem;
	}
	.aks-section-header .aks-section-title {
		font-size: 8rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 4rem;
	}
	/* first slide */
	.aks-slide-welcome .aks-text {
		padding-right: 120px;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-man-code-wrapper {
		flex-direction: column;
	}
	.aks-slide-vocab-1 .aks-col-single {
		width: 100%;
	}
	.aks-slide-vocab-1 .aks-col-single-2 {
		border-top: 1px solid #cdcdcd;
		border-left: none;
		padding: 50px 30px;
	}
	.aks-slide-vocab-1 .aks-col-single-1 {
		display: flex;
		align-items: center;
	}
	.aks-slide-vocab-1 .aks-col-single-1 .aks-pre {
		width: 100%;
	}
}
@media (max-width: 999px) and (min-width: 900px) and (max-height: 799px) and (min-height: 750px),
(max-width: 1149px) and (min-width: 1000px) and (max-height: 900px) and (min-height: 800px) {
	h1 {
		font-size: 4rem;
	}
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 1.2rem;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list {
		flex-wrap: wrap;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
		margin-bottom: 5px;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child::after {
		display: none;
	}
}
@media (max-width: 914px) and (orientation: portrait), 
(max-width: 1099px) and (min-height: 800px) and (max-height: 1099px) {
	/* font */
	p, ul, ol {
		font-size: 1.5rem;
	}
	h1 {
		font-size: 3.75rem;
	}
	.aks-slide-style-basic .aks-title {
		font-size: 2.5rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 4rem;
	}
	.aks-section-header .aks-section-title {
		font-size: 6rem;
	}
	.aks-lms-table, .aks-lms-admin-info p, .aks-lms-admin-info .aks-title-sub {
		font-size: 1rem;
	}
	/* checklists */
	.aks-checklist .aks-check,
	.aks-checklist li::before {
		top: 0;
	}
	.aks-checklist .aks-check::after {
		left: 11px;
	}
	/* first slide */
	.aks-slide.aks-slide-welcome {
		padding: 0 !important;
	}
	.aks-slide-welcome .aks-text{
		padding: 28px 80px 30px 30px;
	}
	#gears {
		transform: scale(.7);
		transform-origin: right center;
	}
	.aks-slide-welcome .aks-text .aks-title-bottom {
		font-size: 1rem;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list {
		flex-wrap: wrap;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
		margin-bottom: 5px;
	}
	.aks-contact-wrapper-slide-1 .aks-contact-list li:first-child::after {
		display: none;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-pre {
		font-size: 1.15rem;
	}
	.aks-codelabel {
		font-size: 1rem;
	}
	/* second vocab slide */
	.aks-slide-vocab-2 .aks-col-single-inner,
	.aks-slide-vocab-2 .aks-col-single-inner {
		grid-template-columns: 1.5fr 1fr;
	}
	.aks-slide-vocab-2 .aks-pre-inline {
		grid-column: 1;
	}
	.aks-slide-vocab-2 .aks-output {
		grid-column: 2;
	}
	.aks-slide-vocab-2 .aks-pre-html {
		margin-right: 16px;
		margin-bottom: 0;
		grid-column: 1;
		grid-row: 1;
	}
	.aks-slide-vocab-2 .aks-pre-css {
		grid-column: 1;
		grid-row: 2;
	}
	.aks-slide-vocab-2 .aks-output {
		grid-column: 2;
		padding: 16px;
	}
	.aks-slide-vocab-2 .aks-col-2 .aks-output {
		grid-row: 1 / 3;
	}
	/* why external css slide */
	.aks-css-disclaim {
		margin-top: .5em;
	}
	/* css powers slide */
	.aks-lms-table ul li::before {
		width: 28px;
		height: 28px;
		background-size: 20px;
	}
	.aks-lms-table .aks-no::before {
		background-size: 17px;
	}
	/* keep learning slide */
	.aks-link-arrow-wrapper {
		top: 1px;
	}
	.aks-chat-box > span {
		font-size: 1.6rem;
	}
}
@media (max-width: 749px) {
	/* slides overall */
	.slides section {
		height: calc(100% - 3*var(--frame));
	}
	/* font */
	p, ul, ol {
		font-size: 1rem;
	}
	h1 {
		font-size: 3.5rem;
	}
	.aks-slide-style-title-left .aks-title {
		font-size: 2.5rem;
	}
	.aks-slide-style-basic .aks-title {
		font-size: 1.75rem;
	}
	.aks-section-header .aks-section-title {
		font-size: 3rem;
	}
	.aks-lms-table {
		font-size: .8rem;
	}
	/* footer and controls */
	.reveal .controls {
		height: 40px;
		bottom: 0;
	}
	#footer {
		display: none !important;
	}
	/* first slide */
	.aks-slide-welcome .aks-text {
		width: 100%;
	}
	.aks-slide-welcome .aks-text {
		padding: 28px 30px 30px 30px;
	}
	.slides section.aks-slide-welcome .aks-slide-inner {
		align-items: flex-start;
	}
	#gears {
		top: 250px;
		transform: scale(.85);
		right: 50px;
	}
	/* codepen slides */
	.aks-slide-style-codepen .aks-title {
		font-size: .8rem;
	}
	/* small title style slides */
	.aks-slide-style-small-title .aks-title {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	/* first vocab slide */
	.aks-slide-vocab-1 .aks-slide-content-wrapper {
		overflow: hidden;
	}
	.aks-slide-vocab-1 .aks-col-single-1 {
		overflow: auto;
	}
	.aks-slide-vocab-1 .aks-col-single-1::-webkit-scrollbar {
		height: 12px;
	}
	.aks-slide-vocab-1 .aks-col-single-1::-webkit-scrollbar-thumb {
		border: 2px solid #f2f2f2;
		background-color: #6a737b;
		border-radius: 20px;
	}
	.aks-slide-vocab-1 .aks-col-single-1::-webkit-scrollbar-track {
		background: #f2f2f2;
		border-radius: 20px;
	}
	.aks-slide-vocab-1 .aks-col-single-1 .aks-pre {
		width: auto;
	}
	/* second vocab slide */
	.aks-slide-vocab-2 .aks-man-code-wrapper .aks-title-sub {
		font-size: 1.1rem;
	}
	.aks-slide-vocab-2 .aks-col-single-inner, .aks-slide-vocab-2 .aks-col-single-inner {
		grid-template-columns: 1fr;
	}
	.aks-slide-vocab-2 .aks-pre-inline,
	.aks-slide-vocab-2 .aks-pre-css,
	.aks-slide-vocab-2 .aks-output,
	.aks-slide-vocab-2 .aks-pre-html {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.aks-slide-vocab-2 .aks-output {
		border-top: 1px solid #cdcdcd;
		border-left: none;
		padding: 32px;
	}
	.aks-slide-vocab-2 .aks-output > div:first-child {
		font-size: 1.25rem !important;
	}
	.aks-slide-vocab-2 .aks-output > div:last-child {
		font-size: .9rem !important;
	}
	/* css powers slide */
	.aks-lms-table th, .aks-lms-table td {
		padding: 5px;
	}
	.aks-lms-table th:first-child {
		padding-left: 0;
	}
	.aks-lms-table th:last-child, .aks-lms-table td:last-child {
		padding-left: 0;
	}
	.aks-lms-table ul li::before {
		width: 22px;
		height: 22px;
		background-size: 16px;
	}
	.aks-lms-table .aks-no::before {
		background-size: 13px;
	}
	.aks-lms-admin-info {
		padding: 20px;
	}
	/* keep learning slide */
	.aks-link-arrow-wrapper {
		width: 22px;
		height: 22px;
	}
	.aks-resource-list a {
		gap: 7px;
	}
	.aks-resource-list .aks-chat-box {
		padding: 20px;
	}
	.aks-chat-box > span {
		font-size: 1.3rem;
	}
	.aks-chat-box ul {
		padding-left: 20px;
	}
	.aks-slide-style-basic .aks-slide-content-wrapper {
		padding: var(--padding) 0 0 0;
	}
	.aks-resource-list .aks-chat-box {
		margin-top: var(--padding);
	}
	.aks-slide-keep-learning .aks-slide-inner {
		display: flex;
		flex-direction: column;
	}
	.aks-slide-keep-learning .aks-slide-content-wrapper {
		flex: 1;
	}
	.aks-slide-keep-learning .aks-slide-content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.aks-contact-wrapper-slide-last {
		display: block;
		margin-top: var(--padding);
	}
	.aks-contact-wrapper-slide-last .aks-contact-list {
		flex-wrap: wrap;
		justify-content: left;
	}
	.aks-contact-wrapper-slide-last .aks-contact-list li:first-child {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
		margin-bottom: 5px;
	}
	.aks-contact-wrapper-slide-last .aks-contact-list li:first-child::after {
		display: none;
	}
	.aks-contact-wrapper-slide-last .aks-contact-list li a {
		color: inherit;
	}
}