/* resets */
html {
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
}

html {
  /* footer at the bottom */
  min-height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
}

body, ul, li, h1, h2, p {
  margin: 0;
  padding: 0;
}

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

button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  /* show a hand cursor on hover; some argue that we
  should keep the default arrow cursor for buttons */
  cursor: pointer;
  outline: none !important;
  -webkit-transition: background-color 500ms ease;
  -ms-transition: background-color 500ms ease;
  transition: background-color 500ms ease;
}

pre {
  overflow: visible;
}

a {
  text-decoration: none;
}

/* end of resets*/
.link-icon {
  display: inline-block;
  background-image: url("/static/img/link-icon.svg");
  color: #660708;
  background-size: 18px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  margin-left: 10px;
  position: relative;
  top: 3px;
}

span[data-clipboard-text],
span[data-clipboard-target] {
  display: inline-block;
  width: 16px;
  height: 20px;
  background-image: url("/static/img/copy-icon.png");
  background-size: 16px 20px;
  background-position: right center;
  background-repeat: no-repeat;
  padding-left: 14px;
  padding-right: 14px;
  cursor: pointer;
}

.btn {
  -webkit-transition: background-color 500ms ease;
  -ms-transition: background-color 500ms ease;
  transition: background-color 500ms ease;
}

.btn-start {
  display: inline-block;
  background: #BA181B;
  border-radius: 5px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 41px;
  text-align: center;
  color: #F5F3F4;
  filter: drop-shadow(0px 0px 5px #E5383B);
  padding-top: 14px;
  padding-bottom: 5px;
  width: 316px;
  height: 75px;
}
.btn-start:link, .btn-start :visited {
  color: #F5F3F4;
}
.btn-start:hover, .btn-start:active {
  background-color: #E5383B;
  filter: drop-shadow(0px 0px 5px #E5383B);
  color: #F5F3F4;
}

.btn-explore {
  display: inline-block;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 41px;
  text-align: center;
  color: #E5383B;
  color: #E5383B;
  padding-top: 14px;
  padding-bottom: 5px;
  width: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 75px;
  background: transparent;
  border-radius: 5px;
  white-space: nowrap;
}
.btn-explore:link, .btn-explore:visited {
  color: #E5383B;
}
.btn-explore:hover, .btn-explore:active {
  background-color: #D3D3D3;
  filter: drop-shadow(0px 0px 5px #D3D3D3);
}

.btn-see-more {
  display: inline-block;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #E5383B;
  padding-top: 11px;
  padding-bottom: 4px;
  width: 132px;
  height: 46px;
  background: transparent;
  border-radius: 5px;
}
.btn-see-more:link, .btn-see-more :visited {
  color: #E5383B;
}
.btn-see-more:hover, .btn-see-more:active {
  background-color: #D3D3D3;
  filter: drop-shadow(0px 0px 5px #D3D3D3);
}

.hidden {
  display: none;
}

.btn-see-transcript,
.btn-notes {
  display: inline-block;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #E5383B;
  padding-top: 11px;
  padding-bottom: 4px;
  width: auto;
  height: 46px;
  background: transparent;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.btn-see-transcript:link, .btn-see-transcript :visited,
.btn-notes:link,
.btn-notes :visited {
  color: #E5383B;
}
.btn-see-transcript:hover, .btn-see-transcript:active, .btn-see-transcript.active,
.btn-notes:hover,
.btn-notes:active,
.btn-notes.active {
  background-color: #D3D3D3;
  filter: drop-shadow(0px 0px 5px #D3D3D3);
}

.btn-prev-next-episode {
  display: inline-block;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #E5383B;
  padding-top: 11px;
  padding-bottom: 4px;
  width: auto;
  height: 46px;
  background: transparent;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.btn-prev-next-episode:link, .btn-prev-next-episode :visited {
  color: #E5383B;
}
.btn-prev-next-episode:hover, .btn-prev-next-episode:active {
  background-color: #D3D3D3;
  filter: drop-shadow(0px 0px 5px #D3D3D3);
}

pre.copy-paste-code {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #A4161A;
  background: #F5F3F4;
  padding: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin: 0;
  display: inline-block;
  white-space: normal;
  word-break: break-all;
}

.like-btn {
  display: inline-block;
  width: 27.18px;
  height: 28px;
  background-image: url("/static/img/like-outline.svg");
  background-size: 27.18px 28px;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-transition: background-image 500ms ease;
  -ms-transition: background-image 500ms ease;
  transition: background-image 500ms ease;
}
.like-btn.checked {
  background-image: url("/static/img/like-filled.svg");
}
.like-btn:hover {
  background-image: url("/static/img/like-filled.svg");
}

.bookmark {
  grid-area: bookmark;
  display: inline-block;
  width: 20px;
  height: 28px;
  background-image: url("/static/img/bookmark-unchecked.png");
  background-size: 20px 28px;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-transition: background-image 500ms ease;
  -ms-transition: background-image 500ms ease;
  transition: background-image 500ms ease;
}
.bookmark.checked {
  background-image: url("/static/img/bookmark-checked.png");
}
.bookmark:hover {
  background-image: url("/static/img/bookmark-checked.png");
}

.mark-as-completed {
  grid-area: mark-complete;
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("/static/img/completed-unchecked.png");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-transition: background-image 500ms ease;
  -ms-transition: background-image 500ms ease;
  transition: background-image 500ms ease;
}
.mark-as-completed.checked {
  background-image: url("/static/img/completed-checked.png");
}
.mark-as-completed:hover {
  background-image: url("/static/img/completed-checked.png");
}

.my-tooltip {
  padding: 10px;
  color: #161A1D;
  background-color: #F5F3F4;
  text-align: center;
  position: absolute;
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  opacity: 1;
  -webkit-transition: opacity 500ms ease;
  -ms-transition: opacity 500ms ease;
  transition: opacity 500ms ease;
}

.my-episode-result {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "title buttons . command" "desc desc . cover" "tags tags . cover";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content;
  grid-template-columns: 1fr min-content 50px 384px;
  min-height: 340px;
  background: #F5F3F4;
  padding: 20px;
  border: 1px solid #660708;
  border-radius: 10px;
}
.my-episode-result .title {
  grid-area: title;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  padding-right: 1rem;
  margin: 0;
  color: #A4161A;
}
.my-episode-result .title a:link,
.my-episode-result .title a:visited,
.my-episode-result .title a:hover,
.my-episode-result .title a:active {
  grid-area: title;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #A4161A;
}
.my-episode-result .title .underlined {
  text-decoration-line: underline;
}
.my-episode-result .title .duration {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  /* identical to box height */
  color: #161A1D;
  white-space: nowrap;
}
.my-episode-result .like-btn {
  margin-left: 1rem;
}
.my-episode-result .buttons {
  grid-area: buttons;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.my-episode-result .buttons .bookmark {
  margin-right: 12px;
}
.my-episode-result .desc {
  grid-area: desc;
  margin-top: 0;
}
.my-episode-result .tags {
  grid-area: tags;
  display: block;
}
.my-episode-result .tags li {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #F5F3F4;
  display: inline-block;
  margin-right: 5px;
  margin-top: 10px;
}
.my-episode-result .tags li a {
  background: #161A1D;
  display: block;
  border-radius: 5px;
  color: #F5F3F4;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.my-episode-result .tags li.lightest a {
  background: #E5383B;
}
.my-episode-result .tags li.lighter a {
  background: #BA181B;
}
.my-episode-result .more-buttons-cont {
  grid-area: see;
}
.my-episode-result .transcript {
  grid-area: trans;
  padding: 20px;
}
.my-episode-result .transcript h4 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #A4161A;
}
.my-episode-result .transcript p {
  line-height: 2;
}
.my-episode-result .copy-paste-code {
  grid-area: command;
  text-align: right;
}
.my-episode-result .cover {
  grid-area: cover;
  cursor: pointer;
  position: relative;
}
.my-episode-result .cover .play-icon {
  display: block;
  position: absolute;
  width: 75px;
  height: 75px;
  color: #F5F3F4;
  z-index: 2;
  right: 20px;
  top: 20px;
  background-image: url("/static/img/cover_play_icon.svg");
  background-repeat: no-repeat;
  -webkit-transition: background-image 500ms ease;
  -ms-transition: background-image 500ms ease;
  transition: background-image 500ms ease;
}
.my-episode-result .cover .play-icon:hover {
  background-image: url("/static/img/cover_play_icon_hover.svg");
}
.my-episode-result .cover .img_cover {
  width: 384px;
  height: 222px;
  display: block;
  opacity: 1;
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
}
.my-episode-result .cover .img2 {
  opacity: 0;
  z-index: 0;
}
.my-episode-result .cover .img3 {
  opacity: 0;
  z-index: 0;
}
.my-episode-result .cover .img4 {
  opacity: 0;
  z-index: 0;
}
@keyframes cycle-imgs1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cycle-imgs2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cycle-imgs3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cycle-imgs4 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.my-episode-result .cover:hover .img1 {
  -webkit-animation: cycle-imgs1 8s infinite;
  -moz-animation: cycle-imgs1 8s infinite;
  -o-animation: cycle-imgs1 8s infinite;
  animation: cycle-imgs1 8s infinite;
}
.my-episode-result .cover:hover .img2 {
  -webkit-animation: cycle-imgs2 8s infinite;
  -moz-animation: cycle-imgs2 8s infinite;
  -o-animation: cycle-imgs2 8s infinite;
  animation: cycle-imgs2 8s infinite;
}
.my-episode-result .cover:hover .img3 {
  -webkit-animation: cycle-imgs3 8s infinite;
  -moz-animation: cycle-imgs3 8s infinite;
  -o-animation: cycle-imgs3 8s infinite;
  animation: cycle-imgs3 8s infinite;
}
.my-episode-result .cover:hover .img4 {
  -webkit-animation: cycle-imgs4 8s infinite;
  -moz-animation: cycle-imgs4 8s infinite;
  -o-animation: cycle-imgs4 8s infinite;
  animation: cycle-imgs4 8s infinite;
}

.my-short-video-result {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "img content";
  /*@formatter:on*/
  grid-template-rows: min-content min-content;
  grid-template-columns: min-content 1fr;
  margin-bottom: 52px;
  border: 1px solid #660708;
  border-radius: 10px;
  background: #F5F3F4;
}
.my-short-video-result.last-in-col {
  margin-bottom: 0px;
}
.my-short-video-result img {
  grid-area: img;
  border-radius: 10px 0px 0px 0px;
  margin: 20px;
  margin-right: 0px;
}
.my-short-video-result .content {
  grid-area: content;
  padding: 16px;
  background: #F5F3F4;
  box-sizing: border-box;
}
.my-short-video-result .content .title {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #660708;
}
.my-short-video-result .content .title a:link,
.my-short-video-result .content .title a:visited {
  color: #660708;
  text-decoration: underline;
}
.my-short-video-result .content .title a:hover,
.my-short-video-result .content .title a:active {
  color: #660708;
  text-decoration: underline;
}
.my-short-video-result .content .title .link-icon {
  display: inline-block;
  background-image: url("/static//img/link-icon.png");
  background-size: 18px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  margin-left: 10px;
  position: relative;
  top: 3px;
}
.my-short-video-result .content .desc {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #660708;
  margin-top: 10px;
}
.my-short-video-result .content .tags {
  margin-top: 19px;
}
.my-short-video-result .content .tags li {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #F5F3F4;
  display: inline-block;
  margin-right: 5px;
}
.my-short-video-result .content .tags li a {
  background: #161A1D;
  display: block;
  border-radius: 5px;
  color: #F5F3F4;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 10px;
}
.my-short-video-result .content .tags li.lightest a {
  background: #E5383B;
}
.my-short-video-result .content .tags li.lighter a {
  background: #BA181B;
}

body.frontdoor {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "header" "hero" "learning" "featured" "testimonial" "cta-section" "footer";
  /*@formatter:on*/
  grid-template-rows: repeat(6, min-content) 495px;
  grid-template-columns: 1fr;
}

header {
  grid-area: header;
  width: 100%;
  background: #BA181B;
  height: 70px;
}
header a {
  color: #fff;
  outline: none;
}
header a:link, header a :visited {
  color: #fff;
}
header a:hover {
  color: #fff;
}
header a:active {
  color: #fff;
}
header .cont {
  max-width: 1310px;
  width: 100%;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "logo menu search login-signup";
  /*@formatter:on*/
  grid-template-rows: 1fr;
  grid-template-columns: min-content minmax(340px, 360px) 1fr min-content;
}
header .logo {
  grid-area: logo;
  padding-left: 15px;
  padding-right: 15px;
}
header .logo img {
  width: 230px;
  height: 70px;
  margin-left: -15px;
}
header ul {
  grid-area: menu;
}
header ul li {
  display: inline-block;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #FFFFFF;
}
header ul li a {
  display: block;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 23px;
  padding-bottom: 19px;
}
header ul li:hover {
  text-decoration: underline;
}
header .comp-search {
  grid-area: search;
  width: 100%;
  height: 37px;
  background: #E5383B;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  color: #F5F3F4;
  margin-top: 18px;
  margin-bottom: 14px;
}
header .comp-search input {
  width: 100%;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  outline: none !important;
  background-image: url("/static/img/search-magnifier.svg");
  background-position-y: 10px;
  background-position-x: 10px;
  background-repeat: no-repeat;
  padding: 6px;
  padding-left: 40px;
}
header .comp-search input::placeholder {
  color: inherit;
}
header .login-signup {
  grid-area: login-signup;
  display: flex;
  flex-direction: row;
}
header .btn-login {
  grid-area: login;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #FFFFFF;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 18px;
}
header .btn-signup {
  grid-area: signup;
  margin-top: 18px;
  padding: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  width: 121px;
  height: 37px;
  left: 1279px;
  top: 18px;
  background: #FFFFFF;
  border-radius: 5px;
  color: #BA181B;
}
header .btn-signup:link, header .btn-signup :visited {
  color: #BA181B;
}
header .btn-signup:hover, header .btn-signup:active {
  background-color: #E5383B;
  color: #F5F3F4;
}
header .account {
  grid-area: signup;
  height: 70px;
}
header .account .avatar {
  height: 100%;
  padding: 10px;
}

.hero-cont {
  padding-top: 30px;
  padding-bottom: 94px;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1310px;
  width: 100%;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "text image" "cta cta";
  /*@formatter:on*/
  grid-template-rows: min-content min-content;
  grid-template-columns: minmax(min-content, 748px) 1fr;
}
.hero-cont .text {
  grid-area: text;
  color: #161A1D;
}
.hero-cont .text h1 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 100%;
  /* or 80px */
  color: #161A1D;
}
.hero-cont .text h2 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #161A1D;
  margin-top: 25px;
}
.hero-cont .image {
  grid-area: image;
  padding-top: 30px;
  position: relative;
}
.hero-cont .image .browser {
  position: relative;
}
.hero-cont .image .gif {
  z-index: 2;
  position: absolute;
  width: 544px;
  top: 90px;
  left: 20px;
}
.hero-cont .cta {
  grid-area: cta;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: ". start explore instructor";
  /*@formatter:on*/
  grid-template-rows: 1fr;
  grid-template-columns: 110px min-content min-content 1fr;
  position: relative;
  padding-top: 1rem;
}
.hero-cont .cta .btn-start {
  grid-area: start;
  margin-top: 0px;
}
.hero-cont .cta .btn-explore {
  grid-area: explore;
  margin-left: 15px;
  margin-top: 0px;
}
.hero-cont .cta .instructor {
  grid-area: instructor;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: -30px;
  z-index: 3;
}

.learning-section {
  grid-area: learning;
  width: 1342px;
  max-width: 95vw;
  margin: auto;
  margin-bottom: 100px;
}
.learning-section .cont {
  width: 100%;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "title" "subtitle" "items";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content;
  grid-template-columns: 1fr;
  background: #A4161A;
  padding: 85px;
  position: relative;
}
.learning-section h3 {
  grid-area: title;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 38px;
  /* identical to box height */
  color: #F5F3F4;
  margin: 0;
}
.learning-section small {
  grid-area: subtitle;
  margin-top: 10px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
.learning-section .items {
  grid-area: items;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  row-gap: 60px;
}
.learning-section .items ul {
  width: 228px;
  display: block;
  float: left;
}
.learning-section .items ul li.icon img {
  width: 60px;
  height: 60px;
}
.learning-section .items ul li.title {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
  margin-top: 14px;
  margin-bottom: 10px;
}
.learning-section .items ul li {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: #F5F3F4;
}

.featured-section {
  grid-area: featured;
  width: 100%;
  max-width: 1342px;
  margin: auto;
  margin-bottom: 100px;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "title . ." "subtitle . ." "left . right" "more more more";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content;
  grid-template-columns: 1fr 29px 1fr;
}
.featured-section h3 {
  grid-area: title;
  font-family: Merriweather;
  text-decoration: underline;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  color: #A4161A;
  margin: 0;
}
.featured-section h4 {
  grid-area: subtitle;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #161A1D;
  margin: 0;
  margin-bottom: 36px;
}
.featured-section .left {
  grid-area: left;
}
.featured-section .right {
  grid-area: right;
}
.featured-section ul {
  position: relative;
}
.featured-section .card {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "img content";
  /*@formatter:on*/
  grid-template-rows: min-content min-content;
  grid-template-columns: min-content 1fr;
  margin-bottom: 52px;
  border: 1px solid #660708;
  border-radius: 10px;
  background: #F5F3F4;
}
.featured-section .card.last-in-col {
  margin-bottom: 0px;
}
.featured-section .card img {
  grid-area: img;
  border-radius: 10px 0px 0px 0px;
  padding: 1rem;
  padding-right: 0px;
}
.featured-section .card .content {
  grid-area: content;
  padding: 16px;
  background: #F5F3F4;
  box-sizing: border-box;
}
.featured-section .card .content .title {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #660708;
}
.featured-section .card .content .title a:link,
.featured-section .card .content .title a:visited {
  color: #660708;
  text-decoration: underline;
}
.featured-section .card .content .title a:hover,
.featured-section .card .content .title a:active {
  color: #660708;
  text-decoration: underline;
}
.featured-section .card .content .desc {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #660708;
  margin-top: 10px;
}
.featured-section .card .content .tags {
  margin-top: 19px;
}
.featured-section .card .content .tags li {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #F5F3F4;
  display: inline-block;
  margin-right: 5px;
}
.featured-section .card .content .tags li a {
  background: #161A1D;
  display: block;
  border-radius: 5px;
  color: #F5F3F4;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 10px;
}
.featured-section .card .content .tags li.lightest a {
  background: #E5383B;
}
.featured-section .card .content .tags li.lighter a {
  background: #BA181B;
}
.featured-section .btn-see-more {
  grid-area: more;
  margin: auto;
  margin-top: 23px;
  text-align: center;
}

.testimonial-section {
  grid-area: testimonial;
  width: 100%;
  background: linear-gradient(95.61deg, #660708 38.13%, #E5383B 94.37%);
  height: 414px;
  margin-top: 20px;
}
.testimonial-section .cont {
  width: 1342px;
  max-width: 95vw;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "image content";
  /*@formatter:on*/
  grid-template-rows: 412px;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
.testimonial-section .testimonial {
  grid-area: image;
  position: relative;
  left: 36px;
  top: -38px;
}
.testimonial-section .content {
  grid-area: content;
  padding-top: 3vw;
  padding-bottom: 3vw;
  position: relative;
}
.testimonial-section .content blockquote {
  width: 670px;
  max-width: 45vw;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 38px;
  color: #F5F3F4;
  margin: 0;
  position: relative;
  text-indent: 40px;
}
.testimonial-section .content small {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
  top: 22px;
  position: relative;
  display: block;
}
.testimonial-section .content blockquote:before {
  content: open-quote;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 70px;
  line-height: 88px;
  /* identical to box height */
  color: #F5F3F4;
  position: absolute;
  left: -40px;
  top: -20px;
}
.testimonial-section .content blockquote:after {
  content: close-quote;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 70px;
  line-height: 18px;
  color: #F5F3F4;
  position: relative;
  top: 20px;
}

.cta-section {
  grid-area: cta-section;
  width: 100%;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: ". title ." ". subtitle ." ". buttons .";
  /*@formatter:on*/
  grid-template-rows: min-content min-content 75px;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  padding-top: 105px;
  padding-bottom: 210px;
}
.cta-section h3 {
  grid-area: title;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 38px;
  text-align: center;
  color: #161A1D;
  margin: 0;
  margin: auto;
  width: 670px;
  max-width: 95vw;
}
.cta-section h4 {
  grid-area: subtitle;
  font-family: Merriweather;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 25px;
  color: #161A1D;
  margin: 0;
  margin-top: 14px;
  padding-bottom: 26px;
}
.cta-section .buttons-cont {
  grid-area: buttons;
}
.cta-section .buttons-cont .btn-start {
  grid-area: start;
  margin-right: 15px;
}
.cta-section .buttons-cont .btn-explore {
  margin-top: 8px;
  grid-area: explore;
}

footer {
  grid-area: footer;
  width: 100%;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "top" "bottom";
  /*@formatter:on*/
  grid-template-rows: min-content min-content;
  grid-template-columns: 1fr;
  background: #161A1D;
  padding-top: 68px;
  padding-left: 31px;
  padding-right: 31px;
  padding-bottom: 75px;
}
footer .top {
  grid-area: top;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "links . newsletter";
  /*@formatter:on*/
  grid-template-rows: min-content;
  grid-template-columns: 1fr 60px 445px;
  padding-bottom: 20px;
}
footer .top .links {
  grid-area: links;
  display: flex;
  justify-content: space-between;
}
footer .top .links ul {
  display: block;
  float: left;
  padding-right: 30px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
footer .top .links ul a:link,
footer .top .links ul a:visited {
  color: #F5F3F4;
}
footer .top .links ul a:hover,
footer .top .links ul a:active {
  color: #F5F3F4;
  text-decoration: underline;
}
footer .top .links ul .title {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
  padding-bottom: 20px;
}
footer .top .newsletter {
  grid-area: newsletter;
}
footer .top .newsletter h4 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 27px;
  color: #B1A7A6;
  margin: 0;
  margin-bottom: 14px;
}
footer .top .newsletter small {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
  width: 392px;
}
footer .top .newsletter .formkit-form[data-uid="52e97dd3bc"] {
  position: relative;
  top: 20px;
}
footer .top .newsletter .formkit-form[data-uid="52e97dd3bc"] .formkit-input {
  background-color: #0B090A;
  border: 0px none;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  /* identical to box height */
  color: #D3D3D3;
}
footer .top .newsletter .formkit-form[data-uid="52e97dd3bc"] .formkit-submit {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #F5F3F4;
  background: #BA181B;
  border-radius: 5px;
}
footer .top .newsletter .formkit-form[data-uid="52e97dd3bc"] .formkit-submit:hover {
  background-color: #E5383B;
  color: #F5F3F4;
}
footer .top .newsletter .formkit-form[data-uid="52e97dd3bc"] .formkit-powered-by-convertkit-container {
  display: none;
}
footer .bottom {
  grid-area: bottom;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "copy icons";
  /*@formatter:on*/
  grid-template-rows: min-content;
  grid-template-columns: 1fr 445px;
  border-top: 2px solid #0B090A;
  padding-top: 42px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  /* identical to box height */
  color: #F5F3F4;
}
footer .bottom .copyright {
  grid-area: copy;
}
footer .bottom .icons {
  grid-area: icons;
}
footer .bottom .github-icon {
  width: 50px;
}
footer .bottom .twitter-icon {
  width: 50px;
  position: relative;
  margin-left: 1rem;
  top: 2px;
}

.bg-striped {
  position: absolute;
  height: 100%;
  top: 630px;
  z-index: -3;
  background-image: url("/static/img/background-striped.svg");
  background-repeat: no-repeat;
  overflow: hidden;
  width: 1416px;
  max-width: 100vw;
  left: 50%;
  margin: auto;
  margin-left: -670px;
}

.path-bg {
  position: absolute;
  height: 140vh;
  top: 580px;
  z-index: -1;
  background-image: url("/static/img/path-bg.svg");
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  max-width: 90vw;
  left: 50%;
  margin: auto;
  margin-left: -780px;
}

.scissors {
  position: absolute;
  width: 44.85px;
  height: 48.78px;
  left: 50%;
  top: 612px;
  margin: auto;
  margin-left: -656px;
  background-image: url("/static/img/scissors.png");
  background-size: 44.85px 48.78px;
  background-repeat: no-repeat;
  z-index: 1;
}

body.course-page .main-cont {
  width: 1342px;
  max-width: 95vw;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "video" "video-data" "clone-instructions" "episodes";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content;
  grid-template-columns: 1fr;
}
body.course-page .main-cont .video {
  grid-area: video;
}
body.course-page .main-cont .video h1 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 100%;
  color: #161A1D;
  margin-top: 37px;
  margin-bottom: 37px;
}
body.course-page .main-cont .video .iframe-cont {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
body.course-page .main-cont .video .iframe-cont iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.course-page .main-cont .video-data {
  grid-area: video-data;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "prev next" "name buttons" "duration duration" "tags tags" "desc desc" "more more" "notes notes" "trans trans";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content;
}
body.course-page .main-cont .video-data h2 {
  grid-area: name;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  color: #161A1D;
}
body.course-page .main-cont .video-data .duration {
  grid-area: duration;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  /* identical to box height */
  color: #161A1D;
}
body.course-page .main-cont .video-data .prev {
  grid-area: prev;
}
body.course-page .main-cont .video-data .next {
  grid-area: next;
}
body.course-page .main-cont .video-data .next .btn-prev-next-episode {
  float: right;
}
body.course-page .main-cont .video-data .prev, body.course-page .main-cont .video-data .next {
  padding-top: 10px;
  padding-bottom: 10px;
}
body.course-page .main-cont .video-data .buttons {
  grid-area: buttons;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
body.course-page .main-cont .video-data .buttons .bookmark {
  grid-area: bookmark;
  margin-right: 12px;
}
body.course-page .main-cont .video-data .buttons .mark-as-completed {
  grid-area: mark-complete;
}
body.course-page .main-cont .video-data .tags {
  grid-area: tags;
  display: block;
  margin-top: 11px;
}
body.course-page .main-cont .video-data .tags li {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #F5F3F4;
  display: inline-block;
  margin-right: 5px;
}
body.course-page .main-cont .video-data .tags li a {
  background: #161A1D;
  display: block;
  border-radius: 5px;
  color: #F5F3F4;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
body.course-page .main-cont .video-data .tags li.lightest a {
  background: #E5383B;
}
body.course-page .main-cont .video-data .tags li.lighter a {
  background: #BA181B;
}
body.course-page .main-cont .desc {
  grid-area: desc;
  display: block;
  max-width: 670px;
  margin-top: 25px;
}
body.course-page .main-cont .desc a:link,
body.course-page .main-cont .desc a:visited,
body.course-page .main-cont .desc a:hover,
body.course-page .main-cont .desc a:active {
  color: #161A1D;
  font-weight: bold;
}
body.course-page .main-cont .more-buttons-cont {
  grid-area: more;
  padding-top: 30px;
  padding-bottom: 10px;
}
body.course-page .main-cont .transcript {
  grid-area: trans;
}
body.course-page .main-cont .notes {
  grid-area: notes;
}
body.course-page .main-cont .transcript,
body.course-page .main-cont .notes {
  padding: 20px;
  margin-bottom: 20px;
}
body.course-page .main-cont .transcript a:link,
body.course-page .main-cont .transcript a:visited,
body.course-page .main-cont .transcript a:hover,
body.course-page .main-cont .transcript a:active,
body.course-page .main-cont .notes a:link,
body.course-page .main-cont .notes a:visited,
body.course-page .main-cont .notes a:hover,
body.course-page .main-cont .notes a:active {
  color: #A4161A;
}
body.course-page .main-cont .transcript h4,
body.course-page .main-cont .notes h4 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #A4161A;
}
body.course-page .main-cont .transcript p,
body.course-page .main-cont .notes p {
  line-height: 2;
}
body.course-page .main-cont .btn-see-more {
  display: block;
  margin: auto;
  margin-top: 34px;
  margin-bottom: 70px;
}
body.course-page .clone-instructions {
  grid-area: clone-instructions;
  background: #A4161A;
  padding-top: 18px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 18px;
  margin-bottom: 70px;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "title1" "clone" "title2" "explanation" "get-first";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content min-content;
  grid-template-columns: 1fr;
}
body.course-page .clone-instructions .title1 {
  grid-area: title1;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 60px;
  color: #F5F3F4;
  margin: 0;
  background-image: url("/static/img/clone-repo.png");
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: left center;
  text-indent: 80px;
}
body.course-page .clone-instructions .title1 a:link,
body.course-page .clone-instructions .title1 a:visited,
body.course-page .clone-instructions .title1 a:active {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  color: #F5F3F4;
}
body.course-page .clone-instructions .title1 a:hover {
  text-decoration: underline;
}
body.course-page .clone-instructions .clone {
  grid-area: clone;
  margin-bottom: 46px;
}
body.course-page .clone-instructions .clone .copy-paste-code {
  margin-top: 16px;
}
body.course-page .clone-instructions .title2 {
  grid-area: title2;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 60px;
  /* identical to box height */
  color: #F5F3F4;
  margin: 0;
  background-image: url("/static/img/get-branch-repo.png");
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: left center;
  text-indent: 80px;
}
body.course-page .clone-instructions .explanation {
  grid-area: explanation;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
  padding-top: 10px;
  padding-bottom: 24px;
  max-width: 541px;
}
body.course-page .clone-instructions .get-first {
  grid-area: get-first;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
body.course-page .clone-instructions .get-first .copy-paste-code {
  margin-left: 20px;
}
body.course-page .episodes {
  grid-area: episodes;
  margin-bottom: 120px;
}
body.course-page .episodes h2 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  color: #A4161A;
  margin-bottom: 22px;
}
body.course-page .episodes .my-episode-result.current {
  background-color: #d3d3d3;
}
body.course-page .episodes .new-episode-planned {
  background: #A4161A;
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: row;
}
body.course-page .episodes .new-episode-planned .content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 29%;
}
body.course-page .episodes .new-episode-planned h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 0.5rem;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
body.course-page .episodes .new-episode-planned p {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  color: #F5F3F4;
}
body.course-page .episodes .new-episode-planned .btn {
  background-color: #ffffff;
  cursor: pointer;
  padding-left: 2rem;
  padding-right: 2rem;
  padding: 1rem;
  margin-left: 2rem;
}
body.course-page .episodes hr {
  height: 59px;
  width: 6px;
  background-image: url("/static/img/dashed-separator.png");
  background-size: 6px 59px;
  background-repeat: no-repeat;
  border: 0px none;
}

body.topic-results {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "header" "main-cont" "footer";
  /*@formatter:on*/
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: 1fr;
}
body.topic-results .main-cont {
  grid-area: main-cont;
  width: 1342px;
  max-width: 95vw;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
body.topic-results .main-cont h1 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 100%;
  color: #161A1D;
  margin-top: 37px;
  margin-bottom: 37px;
}
body.topic-results .main-cont h2 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #161A1D;
  margin-top: 25px;
}
body.topic-results h3 {
  font-family: Merriweather;
  text-decoration: underline;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  color: #A4161A;
  margin: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

body.shortvideos-page {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "header" "main-cont" "footer";
  /*@formatter:on*/
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: 1fr;
}
body.shortvideos-page .main-cont {
  grid-area: main-cont;
  width: 1342px;
  max-width: 95vw;
  margin: auto;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "video" "video-data";
  /*@formatter:on*/
  grid-template-rows: min-content min-content;
  grid-template-columns: 1fr;
}
body.shortvideos-page .main-cont .video {
  grid-area: video;
}
body.shortvideos-page .main-cont .video h1 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 100%;
  color: #161A1D;
  margin-top: 37px;
  margin-bottom: 37px;
}
body.shortvideos-page .main-cont .video .iframe-cont {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
body.shortvideos-page .main-cont .video .iframe-cont iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.shortvideos-page .main-cont .video-data {
  grid-area: video-data;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "prev next" "name buttons" "duration duration" "tags tags" "desc desc" "code code" "more more" "notes notes" "trans trans";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content min-content;
  grid-template-columns: 1fr min-content min-content min-content;
}
body.shortvideos-page .main-cont .video-data h2 {
  grid-area: name;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  color: #161A1D;
}
body.shortvideos-page .main-cont .video-data .duration {
  grid-area: duration;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  /* identical to box height */
  color: #161A1D;
}
body.shortvideos-page .main-cont .video-data .prev {
  grid-area: prev;
}
body.shortvideos-page .main-cont .video-data .next {
  grid-area: next;
}
body.shortvideos-page .main-cont .video-data .next .btn-prev-next-episode {
  float: right;
}
body.shortvideos-page .main-cont .video-data .prev, body.shortvideos-page .main-cont .video-data .next {
  padding-top: 10px;
  padding-bottom: 10px;
}
body.shortvideos-page .main-cont .video-data .like-btn {
  margin-left: 1rem;
}
body.shortvideos-page .main-cont .video-data .buttons {
  grid-area: buttons;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
body.shortvideos-page .main-cont .video-data .buttons .bookmark {
  grid-area: bookmark;
  margin-right: 12px;
}
body.shortvideos-page .main-cont .video-data .buttons .mark-as-completed {
  grid-area: mark-complete;
}
body.shortvideos-page .main-cont .video-data .tags {
  grid-area: tags;
  display: block;
  margin-top: 11px;
}
body.shortvideos-page .main-cont .video-data .tags li {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #F5F3F4;
  display: inline-block;
  margin-right: 5px;
}
body.shortvideos-page .main-cont .video-data .tags li a {
  background: #161A1D;
  display: block;
  border-radius: 5px;
  color: #F5F3F4;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
body.shortvideos-page .main-cont .video-data .tags li.lightest a {
  background: #E5383B;
}
body.shortvideos-page .main-cont .video-data .tags li.lighter a {
  background: #BA181B;
}
body.shortvideos-page .main-cont .desc {
  grid-area: desc;
  display: block;
  max-width: 670px;
  margin-top: 25px;
}
body.shortvideos-page .main-cont .desc a:link,
body.shortvideos-page .main-cont .desc a:visited,
body.shortvideos-page .main-cont .desc a:hover,
body.shortvideos-page .main-cont .desc a:active {
  color: #161A1D;
  font-weight: bold;
}
body.shortvideos-page .main-cont .code {
  grid-area: code;
  display: block;
  width: 100%;
  margin-top: 25px;
  color: #161A1D;
}
body.shortvideos-page .main-cont .code a {
  text-decoration: underline;
}
body.shortvideos-page .main-cont .code a:link,
body.shortvideos-page .main-cont .code a:visited,
body.shortvideos-page .main-cont .code a:hover,
body.shortvideos-page .main-cont .code a:active {
  color: #161A1D;
}
body.shortvideos-page .main-cont .code h3, body.shortvideos-page .main-cont .code h4 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #A4161A;
}
body.shortvideos-page .main-cont .code h3 a:link,
body.shortvideos-page .main-cont .code h3 a:visited,
body.shortvideos-page .main-cont .code h3 a:hover,
body.shortvideos-page .main-cont .code h3 a:active, body.shortvideos-page .main-cont .code h4 a:link,
body.shortvideos-page .main-cont .code h4 a:visited,
body.shortvideos-page .main-cont .code h4 a:hover,
body.shortvideos-page .main-cont .code h4 a:active {
  color: #A4161A;
}
body.shortvideos-page .main-cont .code p {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  max-width: 670px;
}
body.shortvideos-page .main-cont .code pre {
  width: 100%;
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "code copy-btn";
  /*@formatter:on*/
  grid-template-rows: min-content;
  grid-template-columns: 1fr min-content;
  background-color: #f0f0f0;
}
body.shortvideos-page .main-cont .code pre code {
  grid-area: code;
  padding: 20px;
}
body.shortvideos-page .main-cont .code pre span[data-clipboard-text],
body.shortvideos-page .main-cont .code pre span[data-clipboard-target] {
  grid-area: copy-btn;
  display: block;
  width: 16px;
  height: 20px;
  margin: 20px;
}
body.shortvideos-page .main-cont .more-buttons-cont {
  grid-area: more;
  padding-top: 30px;
  padding-bottom: 10px;
}
body.shortvideos-page .main-cont .transcript {
  grid-area: trans;
}
body.shortvideos-page .main-cont .notes {
  grid-area: notes;
}
body.shortvideos-page .main-cont .transcript,
body.shortvideos-page .main-cont .notes {
  padding: 20px;
  margin-bottom: 20px;
}
body.shortvideos-page .main-cont .transcript a:link,
body.shortvideos-page .main-cont .transcript a:visited,
body.shortvideos-page .main-cont .transcript a:hover,
body.shortvideos-page .main-cont .transcript a:active,
body.shortvideos-page .main-cont .notes a:link,
body.shortvideos-page .main-cont .notes a:visited,
body.shortvideos-page .main-cont .notes a:hover,
body.shortvideos-page .main-cont .notes a:active {
  color: #A4161A;
}
body.shortvideos-page .main-cont .transcript h4,
body.shortvideos-page .main-cont .notes h4 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #A4161A;
}
body.shortvideos-page .main-cont .transcript p,
body.shortvideos-page .main-cont .notes p {
  line-height: 2;
}
body.shortvideos-page .main-cont .btn-see-more {
  display: block;
  margin: auto;
  margin-top: 34px;
  margin-bottom: 70px;
}

body.about-page {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "header" "title" "testimonial" "cta-section" "footer";
  /*@formatter:on*/
  grid-template-rows: min-content min-content min-content min-content 495px;
  grid-template-columns: 1fr;
}
body.about-page .title-section {
  grid-area: title;
  max-width: 1310px;
  width: 100%;
  margin: auto;
  padding: 10px;
  padding-top: 30px;
  padding-bottom: 120px;
}
body.about-page .title-section h1 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 100%;
  color: #161A1D;
}
body.about-page .title-section h2 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #161A1D;
  margin-top: 25px;
}
body.about-page .title-section a:link,
body.about-page .title-section a:visited {
  color: #161A1D;
  text-decoration: underline;
}
body.about-page .title-section a:hover,
body.about-page .title-section a:active {
  color: #161A1D;
  text-decoration: underline;
}
body.about-page .cta-section {
  padding-top: 160px;
}

body.privacy .main-cont,
body.terms .main-cont {
  width: 1342px;
  max-width: 95vw;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #161A1D;
}
body.privacy .main-cont h1, body.privacy .main-cont h2, body.privacy .main-cont h3, body.privacy .main-cont h4, body.privacy .main-cont h5,
body.terms .main-cont h1,
body.terms .main-cont h2,
body.terms .main-cont h3,
body.terms .main-cont h4,
body.terms .main-cont h5 {
  text-align: center;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  color: #161A1D;
  padding: 10px;
}
body.privacy .main-cont h1, body.privacy .main-cont h2,
body.terms .main-cont h1,
body.terms .main-cont h2 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  color: #A4161A;
  padding: 30px;
}
body.privacy .main-cont h3,
body.terms .main-cont h3 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 38px;
  text-align: center;
  color: #161A1D;
  padding: 20px;
}
body.privacy .main-cont ul,
body.terms .main-cont ul {
  padding: 20px;
}
body.privacy .main-cont li,
body.terms .main-cont li {
  list-style-type: none;
}
body.privacy .main-cont p,
body.terms .main-cont p {
  padding: 10px;
}
body.privacy .main-cont a:link,
body.privacy .main-cont a:visited,
body.terms .main-cont a:link,
body.terms .main-cont a:visited {
  color: #161A1D;
}
body.privacy .main-cont a:hover,
body.privacy .main-cont a:active,
body.terms .main-cont a:hover,
body.terms .main-cont a:active {
  color: #161A1D;
  text-decoration: underline;
}

body.explore-topics .topics-cont {
  width: calc(100% - 8rem);
  margin: auto;
  margin-top: 8rem;
  margin-bottom: 4rem;
  display: grid;
  grid-template-areas: "title" "subtitle" "items";
  grid-template-rows: min-content min-content min-content;
  grid-template-columns: 1fr;
  background: #A4161A;
  position: relative;
  padding: 4rem;
}
body.explore-topics .topics-cont h3 {
  grid-area: title;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 38px;
  /* identical to box height */
  color: #F5F3F4;
  margin: 0;
}
body.explore-topics .topics-cont small {
  grid-area: subtitle;
  margin-top: 10px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
body.explore-topics .topics-cont .topics {
  display: flex;
  flex-wrap: wrap;
  padding-top: 4rem;
}
body.explore-topics .topics-cont .topics .topic {
  width: 25%;
  height: 250px;
  padding: 1rem;
}
body.explore-topics .topics-cont .topics .topic .tag a {
  background: #E5383B;
  display: block;
  border-radius: 5px;
  color: #F5F3F4;
  padding: 0.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  width: min-content;
  white-space: nowrap;
}
body.explore-topics .topics-cont .topics .topic .title {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
body.explore-topics .topics-cont .topics .topic .desc {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: #F5F3F4;
}
body.explore-topics .videos-cont {
  width: calc(100% - 8rem);
  margin: auto;
  margin-bottom: 4rem;
  display: grid;
  grid-template-areas: "title" "subtitle" "items";
  grid-template-rows: min-content min-content min-content;
  grid-template-columns: 1fr;
  background: #A4161A;
  position: relative;
  padding: 4rem;
}
body.explore-topics .videos-cont h3 {
  grid-area: title;
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 38px;
  /* identical to box height */
  color: #F5F3F4;
  margin: 0;
}
body.explore-topics .videos-cont small {
  grid-area: subtitle;
  margin-top: 10px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
body.explore-topics .videos-cont .videos {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}
body.explore-topics .videos-cont .videos li {
  width: 100%;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 27px;
  color: #F5F3F4;
}
body.explore-topics .videos-cont .videos .link-icon {
  background-image: url("/static/img/link-icon-white.svg");
}
body.explore-topics .videos-cont .videos a:link,
body.explore-topics .videos-cont .videos a:visited {
  color: #F5F3F4;
  text-decoration: underline;
}
body.explore-topics .videos-cont .videos a:hover,
body.explore-topics .videos-cont .videos a:active {
  color: #F5F3F4;
  text-decoration: underline;
}

body.account-page {
  display: grid;
  /*@formatter:off*/
  grid-template-areas: "header header" "sidebar content" "footer footer";
  /*@formatter:on*/
  grid-template-rows: min-content 1fr 495px;
  grid-template-columns: 1fr 5fr;
}
body.account-page .sidebar {
  grid-area: sidebar;
  padding: 0;
  background-color: #BA181B;
  color: #F5F3F4;
}
body.account-page .sidebar .svg-cont {
  height: 100%;
  width: 24px;
  display: inline-block;
  position: relative;
  margin-right: 1rem;
}
body.account-page .sidebar ul {
  display: flex;
  flex-direction: column;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
}
body.account-page .sidebar ul a {
  display: flex;
  align-items: center;
  padding: 2rem;
  width: 100%;
}
body.account-page .sidebar ul a:link,
body.account-page .sidebar ul a:visited {
  color: #F5F3F4;
}
body.account-page .sidebar ul a.active,
body.account-page .sidebar ul a:hover,
body.account-page .sidebar ul a:active {
  background-color: #A4161A;
  color: #F5F3F4;
  text-decoration: none;
}
body.account-page .content {
  grid-area: content;
  background-color: #F5F3F4;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  font-size: 18px;
}
body.account-page .content h1 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 80px;
  line-height: 100%;
  color: #161A1D;
}
body.account-page .content h1, body.account-page .content h2 {
  width: 100%;
}
body.account-page .content h2 {
  font-family: Merriweather;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
body.account-page .content p {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
body.account-page .content.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
body.account-page .episodes-cont {
  display: flex;
  flex-direction: column;
}
body.account-page .new-course-available input {
  display: inline-block;
}

@media (max-width: 1280px) {
  header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .learning-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }
  .learning-section .cont {
    width: 100%;
    max-width: 100%;
  }

  .featured-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .path-bg {
    display: none;
  }

  .scissors {
    display: none;
  }
}
@media (max-width: 1024px) {
  body.frontdoor .hero-cont .text h1 {
    font-size: 3.5rem;
  }
  body.frontdoor .hero-cont .image .browser {
    width: 380px;
  }
  body.frontdoor .hero-cont .image .gif {
    width: 354px;
    top: 70px;
    left: 13px;
  }
  body.frontdoor .hero-cont .cta {
    padding-top: 2rem;
  }
  body.frontdoor .learning-section {
    margin-bottom: 5rem;
  }
  body.frontdoor .learning-section .items {
    grid-template-columns: repeat(2, 1fr);
  }
  body.frontdoor .learning-section .cont {
    padding: 4rem;
  }
  body.frontdoor .hero-cont .cta .instructor {
    display: none;
  }
  body.frontdoor .featured-section {
    margin-bottom: 5rem;
  }
  body.frontdoor .featured-section .card {
    display: grid;
    grid-template-areas: "img" "content";
    grid-template-rows: min-content min-content;
    grid-template-columns: 1fr;
    margin-bottom: 52px;
    border: 1px solid #660708;
    border-radius: 10px;
    background: #F5F3F4;
  }
  body.frontdoor .featured-section .card img {
    width: 100%;
    padding: 1rem;
  }
  body.frontdoor .testimonial-section {
    height: 375px;
  }
  body.frontdoor .testimonial-section .cont {
    width: 100%;
  }
  body.frontdoor .testimonial-section .testimonial {
    left: -50px;
    width: 380px;
    top: -24px;
  }
  body.frontdoor .testimonial-section .content blockquote {
    font-size: 1.4rem;
  }
  body.frontdoor .cta-section {
    padding-top: 9rem;
    padding-bottom: 7rem;
  }
  body.frontdoor .bg-striped {
    width: 1416px;
    height: 1717px;
    top: 78vh;
    max-width: 130vw;
    left: auto;
    margin: auto;
    margin-left: -30vw;
  }

  body.shortvideos-page .main-cont {
    max-width: none;
    padding: 2rem;
    width: auto;
  }

  body.course-page .my-episode-result {
    /*@formatter:off*/
    grid-template-areas: "title buttons . command" "desc desc . cover" "tags tags . cover";
    /*@formatter:on*/
    grid-template-rows: min-content min-content min-content min-content;
    grid-template-columns: 1fr min-content 50px 200px;
  }
  body.course-page .my-episode-result .cover .img_cover {
    width: 200px;
    height: auto;
  }
  body.course-page .episodes .new-episode-planned .content {
    max-width: none;
  }

  body.explore-topics .topics-cont {
    width: auto;
    padding: 2rem;
    margin-top: 4rem;
  }
  body.explore-topics .videos-cont {
    width: auto;
  }

  header .cont {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-areas: "logo menu login-signup";
    grid-template-rows: 1fr;
    grid-template-columns: min-content 1fr min-content;
  }
  header .cont ul {
    grid-area: menu;
    white-space: nowrap;
  }
  header .comp-search {
    display: none;
  }

  footer .top {
    grid-area: top;
    display: grid;
    /*@formatter:off*/
    grid-template-areas: "links" "newsletter";
    /*@formatter:on*/
    grid-template-rows: min-content min-content;
    grid-template-columns: 1fr;
    padding-bottom: 20px;
  }
  footer .links {
    padding-bottom: 2rem;
    flex-wrap: wrap;
    row-gap: 2rem;
  }
  footer .links ul {
    flex-grow: 1;
  }
  footer .newsletter {
    padding-top: 2rem;
  }
  footer .newsletter [data-style=clean] {
    padding: 0 !important;
  }
  footer .bottom {
    grid-area: bottom;
    display: grid;
    grid-template-areas: "copy icons";
    grid-template-rows: min-content;
    grid-template-columns: 1fr min-content;
  }
  footer .bottom .icons {
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  body.frontdoor .hero-cont {
    /*@formatter:off*/
    grid-template-areas: "image" "text" "cta";
    /*@formatter:on*/
    grid-template-rows: min-content min-content min-content;
    grid-template-columns: 1fr;
    max-width: 100vw;
    padding-top: 0;
    padding-bottom: 4rem;
  }
  body.frontdoor .hero-cont .image {
    margin: auto;
    padding-top: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  body.frontdoor .hero-cont .image .browser {
    width: 350px;
  }
  body.frontdoor .hero-cont .image .gif {
    width: 324px;
    top: 38px;
    left: 13px;
  }
  body.frontdoor .hero-cont .cta {
    grid-template-areas: "start" "explore";
    grid-template-rows: min-content min-content;
    grid-template-columns: min-content;
    margin: auto;
    padding-top: 5rem;
  }
  body.frontdoor .hero-cont .cta .btn-explore {
    margin: 0;
    margin-top: 1rem;
  }
  body.frontdoor .learning-section {
    padding-bottom: 3rem;
  }
  body.frontdoor .learning-section .items {
    grid-template-columns: 1fr;
  }
  body.frontdoor .learning-section .items ul {
    width: auto;
    float: none;
  }
  body.frontdoor .featured-section {
    grid-area: featured;
    width: 100%;
    max-width: 100vw;
    display: grid;
    grid-template-areas: "title" "subtitle" "left" "right" "more ";
    grid-template-rows: min-content;
    grid-template-columns: 1fr;
  }
  body.frontdoor .bg-striped {
    display: none;
  }
  body.frontdoor .testimonial-section {
    height: auto;
    margin: 0;
  }
  body.frontdoor .testimonial-section .cont {
    margin: auto;
    display: grid;
    grid-template-areas: "image" "content";
    grid-template-rows: min-content min-content;
    grid-template-columns: 1fr;
    position: relative;
  }
  body.frontdoor .testimonial-section .testimonial {
    top: -30px;
    left: auto;
    width: 100%;
  }
  body.frontdoor .testimonial-section .content {
    padding: 2rem;
    padding-bottom: 4rem;
  }
  body.frontdoor .testimonial-section .content blockquote {
    width: auto;
    max-width: none;
  }
  body.frontdoor .cta-section {
    padding-top: 4rem;
    padding-bottom: 11rem;
  }
  body.frontdoor .cta-section .buttons-cont {
    padding-top: 2rem;
  }
  body.frontdoor .cta-section .buttons-cont .btn-start {
    margin: 0;
  }

  body.shortvideos-page .main-cont .video-data .duration {
    font-size: 1.5rem;
  }
  body.shortvideos-page .main-cont .code h3, body.shortvideos-page .main-cont .code h4 {
    font-size: 2rem;
  }
  body.shortvideos-page .main-cont .code p {
    font-size: 1.5rem;
  }
  body.shortvideos-page .main-cont .desc {
    font-size: 1.5rem;
  }
  body.shortvideos-page .main-cont pre {
    font-size: 1.5rem;
  }
  body.shortvideos-page .main-cont .notes,
body.shortvideos-page .main-cont .transcript {
    font-size: 1.5rem;
  }
  body.shortvideos-page .main-cont .notes p,
body.shortvideos-page .main-cont .transcript p {
    font-size: 1.5rem;
  }
  body.shortvideos-page .main-cont .notes h4,
body.shortvideos-page .main-cont .transcript h4 {
    font-size: 2rem;
  }

  body.course-page .main-cont .video h1 {
    font-size: 40px;
  }
  body.course-page .main-cont .video-data {
    /*@formatter:off*/
    grid-template-areas: "prev next" "name name" "duration buttons" "tags tags" "desc desc" "more more" "notes notes" "trans trans";
    /*@formatter:on*/
    grid-template-rows: min-content min-content min-content min-content min-content min-content min-content min-content;
  }
  body.course-page .main-cont .video-data h2 {
    margin-top: 2rem;
  }
  body.course-page .my-episode-result {
    /*@formatter:off*/
    grid-template-areas: "title buttons" "cover cover" "desc desc" "tags tags";
    /*@formatter:on*/
    grid-template-rows: min-content minmax(200px, min-content) min-content min-content;
    grid-template-columns: 1fr min-content;
  }
  body.course-page .my-episode-result .cover {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  body.course-page .my-episode-result .cover .img_cover {
    width: 100%;
    height: auto;
  }
  body.course-page .clone-instructions .title1 {
    font-size: 22px;
  }
  body.course-page .main-cont .notes {
    white-space: normal;
    word-break: break-all;
  }
  body.course-page .episodes .new-episode-planned {
    flex-direction: column;
  }
  body.course-page .episodes .new-episode-planned .btn {
    margin: 0;
    margin-top: 2rem;
  }
  body.course-page .episodes .new-episode-planned .content {
    width: 100%;
  }

  body.explore-topics .topics-cont .topics .topic {
    width: 50%;
  }

  header .cont {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-areas: "logo";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
  }
  header .cont ul {
    grid-area: menu;
    display: none;
  }
  header .login-signup {
    display: none;
  }
}

/*# sourceMappingURL=styles.css.map */