/*
 * Breakpoints to use:
 *   /* Small-Phone Only * /
 *   @media screen and (max-width: 499px) {}
 *   /* Phone Only * /
 *   @media screen and (min-width: 500px) and (max-width: 767px) {}
 *   /* Tablet Only * /
 *   @media only screen and (min-width: 768px) and (max-width: 991px) {}
 *   /* Small Monitor Only * /
 *   @media only screen and (min-width: 992px) and (max-width: 1199px) {}
 *   /* Large Monitor Only * /
 *   @media only screen and (min-width: 1200px) and (max-width: 1649px) {}
 *   /* Extra-Large Monitor Only * /
 *   @media only screen and (min-width: 1650px) {}
 *
 *   /* Phone and Under * /
 *   @media screen and (max-width: 767px) {}
 *   /* Tablet and Under * /
 *   @media only screen (max-width: 991px) {}
 *   /* Small Monitor and Under * /
 *   @media only screen and (max-width: 1199px) {}
 *   /* Large Monitor and Under * /
 *   @media only screen and (max-width: 1649px) {}
 *
 *   /* Phone and Over * /
 *   @media screen and (min-width: 500px) {}
 *   /* Tablet and Over * /
 *   @media only screen and (min-width: 768px) {}
 *   /* Small Monitor and Over * /
 *   @media only screen and (min-width: 992px) {}
 *   /* Large Monitor and Over * /
 *   @media only screen and (min-width: 1200px) {}
 */

/*====================================
 *              Base
 *====================================*/

 body {
  background-color: #000000 !important;
}

body.webshop.front {
  text-rendering: geometricPrecision;
  background-color: #f0f0f0 !important;
}

h1 {
  font-size: 50px;
  line-height: 0.9;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 16px;
}

h1.orange, h2.orange, h3.orange, h4.orange, h5.orange, h6.orange {
  color: #de3f00 !important;
}

input.transparent {
  background: transparent !important;
  border: none !important;
  font-size: 0 !important;
}

input:disabled {
    opacity: .5;
}

.ui.labeled.icon.buttons .button, .ui.labeled.icon.button {
    padding-left: 2.3em !important;
    padding-right: 1em !important;
}

/* Modal Close */

.ui.modal>.close:focus{
  outline: none;
}

.ui.modal>.close {
  padding: 3.75rem 5.5rem 2rem 2rem;
}

/* Phone and tablets */

@media only screen and (max-width: 991px) {
  .ui.modal>.close {
    padding: 0 0 0 0;
    margin-bottom: 1em;
  }
}

.ui.modal {
  padding-top: 1.5em;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
  h3 {
    font-size: 18px;
  }
  h4 {
    font-size: 15px;
  }
}

a {
  color: white;
}

a:hover {
  color: white;
}

.container {
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
}

.container:not(.footer-container) {
  max-width: 1200px;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .container {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(100% - 60px);
  }

  nav.container {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Tablet and Over */

@media screen and (min-width: 768px) {
  .container {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(100% - 60px);
  }
}

/* Desktop and Over */

@media screen and (min-width: 1200px) {
  .container {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 40px);
  }

  .container:not(.footer-container) {
    max-width: 1200px;
  }
}

/* Very large Desktop Only */

@media screen and (min-width: 1650px) {
  .webshop.front .container, .vp.front .container {
    max-width: 1600px;
  }
}

header {
  background-color: black;
  color: white;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  header {
    padding: 5px;
  }
}

main {
  background-color: #1a1a1a;
}

#skip a:link, #skip a:hover, #skip a:visited {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ui.basic.grey.button {
    color: #E5E5E5 !important;
}

/*
* Bootstrap visibility {{{
*/

.visible-hidden {
  display: none;
  visibility: hidden;
}

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

/* Phone and Under */

@media only screen and (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}

/* Tablet Only */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}

/*
 * }}} Bootstrap visibility
 */

/*
 * Helper Classes
 */

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 70px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

/*====================================
 *              Layouts
 *====================================*/

.l-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.l-footer {
  background-color: black;
  color: white;
  padding-bottom: 45px;
}

.l-footer .container {
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-wrap: wrap;
}

.l-footer .container.l-flex {
  margin-top: 35px;
}

.l-footer ul {
  padding: 0;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .l-footer .container:not(.logos) {
    justify-content: center;
    flex-direction: column;
  }
  .l-footer .container {
    margin-bottom: 25px;
  }
  .l-footer ul:not(.social-links) {
    padding-left: 0;
    margin-left: 8px;
  }
  .l-footer ul.social-links {
    padding-right: 1em;
  }
}

/* Tablet Only */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .l-footer .container:not(.logos) {
    justify-content: center;
    flex-direction: column;
  }
}

/* Tablet until 1224px (because 1224px is the moment the div.social-legal goes below the div.nav-available) */

@media only screen and (min-width: 768px) and (max-width: 1224px) {
  .container.l-flex {
    justify-content: center;
  }
}

/*====================================
 *       Extending Semantic UI
 *====================================*/

/* Adding a ".stackable" option to horizontal lists */

/* Phone and Under */

@media screen and (max-width: 767px) {
  .ui.horizontal.stackable.list .item {
    margin: 0;
    display: block;
  }
}

/*====================================
 *            Overrides
 *====================================*/

/*
 * Drupal overrides
 */

li a.active {
  color: inherit;
}

/*
 * Overriding SemanticUI components
 */

/* Restoring the darkgrey links in dropdown menus */

.ui.dropdown .item a {
  color: rgba(0, 0, 0, 0.87) !important;
}

/* Somehow the L2 menu in "browse" displays as flex, so we need to indicate the direction */

header .ui.dropdown .right.menu {
  flex-direction: column;
}

/* Menu items are black in color by default */

.ui.menu a.item:hover {
  color: white;
}

/* Square corners for all SemanticUI menus */

.ui.floating.dropdown>.menu, .ui.dropdown .menu .right.menu {
  border-radius: 0 !important;
}

/* Removes letter-spacing in dropdown links */

.ui.menu .ui.dropdown .menu>.item {
  letter-spacing: 0.02em !important;
}

/* Get rid of the huge space between link and dropdown caret */

.ui.dropdown>.dropdown.icon {
  margin: 0em 0em 0em 0.25em;
}

/* Forcing a margin bottom on all .ui.message */

.ui.message:last-child {
  margin-bottom: 1em;
}

/* Changing the default button style */

.ui.button {
  border-radius: 0 !important;
}

/* Changing the orange button color */

.ui.orange.buttons .active.button,
.ui.orange.buttons .active.button:active,
.ui.orange.active.button,
.ui.orange.button .active.button:active,
.ui.orange.buttons .button,
.ui.orange.button {
    background-color: #de3f00;
}

.ui.orange.buttons .button:hover, .ui.orange.button:hover, .ui.orange.buttons .button:active, .ui.orange.button:active, .ui.orange.buttons .button:focus, .ui.orange.button:focus {
  background-color: #cc3a00;
}

/* No rounded corners on UI Cards */

.ui.cards>.card, .ui.card, .ui.cards>.card> :first-child, .ui.card> :first-child {
  border-radius: 0 !important;
}

/* Firefox issue: dimmables are bleeding outside the container */

.animating.dimmable:not(body), .dimmed.dimmable:not(body), .dimmable:not(body) {
  overflow: hidden !important;
  overflow: -moz-hidden-unscrollable !important;
  /* For Firefox */
}

/* Dimmable on body shouldn't change the element position */

body.dimmable {
  position: inherit !important;
}

/*
 * Overriding Old Kanopy theme
 */

.webshop.front .ui.header, .webshop.front .ui.header .sub.header, .webshop.front h1, .webshop.front h2, .webshop.front h3, .webshop.front h4, .webshop.front h5, .webshop.front h6, .vp.front h1 {
  color: white !important;
  font-weight: bold;
}

/*
 * Overriding "orange links" in old Kanopy theme
 */

footer p a, footer ul a {
  color: white;
}

footer a:hover {
  color: inherit;
}

/*
 * Override ui button @TODO: change the ui button default
 */

.ui.button.form {
  padding: 20px 30px;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  color: white;
  font-weight: bold;
  background: #eb4700;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient( top, #eb4700 1%, #d93600 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient( linear, left top, left bottom, color-stop(1%, #eb4700), to(#d93600));
  background: -o-linear-gradient(top, #eb4700 1%, #d93600 100%);
  background: linear-gradient( to bottom, #eb4700 1%, #d93600 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb4700', endColorstr='#d93600', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  display: inline-block;
}

i.huge.check.icon {
  transform: scale(0.9) translate(-70px, -5px);
  color: #de3f00;
}

/*
 * Displaying bullet list in the bodies of videos
 */

.product-body ul {
  list-style: disc outside none;
  padding-left: 2rem;
}

/* Making the lists responsive for phones */

/* Phone and Under */

@media (max-width: 767px) {
  .ui.horizontal.list .list>.item, .ui.horizontal.list>.item {
    margin-left: 0px;
    width: 50%;
  }
  .ui.horizontal.list {
    display: flex;
    flex-flow: row wrap;
    margin-left: 20px;
    justify-content: center;
  }
}

/*====================================
 *              Modules
 *====================================*/

/*
 * Module "k-dark themed dropdown"
 */

.k-dark.dropdown .menu {
  background-color: black;
  border-radius: 0 !important;
  border: 1px solid #404040;
}

/* Removes extra spacing on left of dropdown */

.k-dark.ui.dropdown .item .text a {
  padding-left: 0 !important;
  border-left: 0;
}

.k-dark.ui.dropdown .item a, .ui.menu .k-dark.ui.dropdown .menu .item {
  color: white !important;
  padding: 0.78571429em 0.8em !important;
  border-left: 3px solid black;
}

.ui.menu .k-dark.ui.dropdown .menu>.item:hover {
  border-color: white;
  /*padding-left: calc(0.8em - 3px) !important;*/
  /*color: white !important;*/
}

.k-dark.ui.pointing.dropdown>.menu:after {
  background: #000 !important;
  border-left: 1px solid #404040;
  border-top: 1px solid #404040;
}

.k-dark .dropdown.item:hover, .k-dark .link.item:hover, .k-dark a.item:hover, .k-dark .item:hover {
  background: transparent !important;
  color: #fff;
}

/*
 * Module "cta"
 */

.cta {
  padding: 20px 30px;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  color: white;
  font-weight: bold;
  background: #eb4700;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient( top, #eb4700 1%, #d93600 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient( linear, left top, left bottom, color-stop(1%, #eb4700), to(#d93600));
  background: -o-linear-gradient(top, #eb4700 1%, #d93600 100%);
  background: linear-gradient( to bottom, #eb4700 1%, #d93600 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb4700', endColorstr='#d93600', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  margin-top: 36px;
  display: inline-block;
}

.cta.secondary {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 1em;
  padding: 18px 30px;
}

.cta.secondary.orange {
  color: #de3f00;
  border-color: #de3f00;
}

.cta.tertiary {
  background: transparent !important;
  font-weight: bold;
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .cta {
    margin-top: 16px;
  }
}

/*
 * Module "p-intro"
 */

.p-intro {
  font-size: 1.7em !important;
  line-height: 1.5 !important;
}

.p-intro+.cta-container {
  margin-top: -35px;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .p-intro {
    font-size: 1.35em;
  }
  .p-intro+.cta-container {
    margin-top: -15px;
  }
}

/*
 * Module "global-nav"
 */

/* The first item in the global-nav should have a padding-left:0 to align left perfectly */

.global-nav .logo, .global-nav .sidebar-toggle {
  padding-left: 0 !important;
}

.global-nav .logo img {
  width: 105px !important;
  height: 36px;
  margin-right: 30px;
}

.global-nav .sidebar-toggle .icon {
  font-size: 2em;
  margin: 0 !important;
}

.global-nav.ui.menu {
  background: #000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}

.global-nav.ui.menu .item {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  color: white;
  background-color: transparent;
  font-size: 0.92857rem;
  font-weight: bold;
  -webkit-transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border 0.3s ease;
  -webkit-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease, -webkit-box-shadow 0.3s ease;
  -o-transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border 0.3s ease;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border 0.3s ease;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.global-nav.ui.menu .item .signup, .global-nav.ui.menu .item .login {
  padding: 10px 10px 7px 10px;
  line-height: 1;
}

.global-nav.ui.menu .item .login {
  border: 2px solid white;
  margin: 0 10px;
}

.global-nav.ui.menu .item .login:hover {
  border-color: #de3f00;
  background-color: #de3f00;
}

.global-nav.ui.menu .item .signup {
  background-color: white;
  color: black;
  font-weight: bold;
  border: 2px solid white;
}

.global-nav.ui.menu .item a.signup:hover {
  background-color: #de3f00;
  color: white;
  border-color: #de3f00;
}

.global-nav.ui.menu .item:before {
  display: none;
}

.global-nav.ui.menu .item .is-activated {
  color: #de3f00;
}

.global-nav .ks-solrsearch-search-box .form-item {
  margin: 0;
}

.global-nav nav.container {
  width: 100%;
  position: relative;
}

.global-nav .divider-right {
  width: 0px;
  margin: 0;
  padding: 0 !important;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .global-nav.ui.menu .item {
    padding: 0.5em;
  }
  .global-nav .logo {
    padding-left: 0.5em !important;
  }
}

/* Tablet Only */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .global-nav .logo {
    margin-right: 0;
  }
}

/*
 * Module "ks-solrsearch-search-box"
 */

.ks-solrsearch-search-box.ui.form {
  background-color: white;
}

.ks-solrsearch-search-box input {
  outline: 0;
  border: 0 !important;
  border-radius: 0;
}

.ks-solrsearch-search-box button {
  background-color: transparent !important;
}

.ks-solrsearch-search-box button .icon {
  color: black;
  font-size: 1.3em;
}

header .ks-solrsearch-search-box .ui.category.search .results {
  width: 40em;
  left: -70%;
}

header .ks-solrsearch-search-box input {
  width: 450px !important;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .ui.stackable.grid>.row>.column.search-maincolumn {
    padding: 1rem 0 !important;
  }
  .global-nav.ui.menu .item {
    padding: 0.5em;
  }
}

/* Tablet Only */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  header .ks-solrsearch-search-box input {
    width: 230px !important;
  }
}

/* Large Monitor and Over */

@media only screen and (min-width: 1200px) {
  header .ks-solrsearch-search-box input {
    width: 450px !important;
  }
  .ks-solrsearch-search-box .ui.category.search .results {
    left: -10% !important;
  }
}

/*
 * Module "section-hero"
 */

.section-hero {
  background-color: black !important;
  background-size: cover !important;
  color: white;
  padding-bottom: 3em;
  text-align: center;
  position: relative;
}

.section-hero h1 {
  font-size: 70px;
  padding-top: 110px;
  text-transform: uppercase;
  letter-spacing: 0.02;
  line-height: 1;
  text-shadow: 0 0 30px #000;
  margin-bottom: 0;
}

.section-hero h4 {
  padding-top: 25px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-shadow: 0 0 30px #000;
  margin-top: 0;
}

.section-hero .kanopy-kids-promo {
  position: absolute;
  top: -10px;
  right: -20px;
  width: 216px;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-hero h1 {
    font-size: 10vw;
    /* 10 viewport width */
    padding-top: 40px;
    letter-spacing: -0.05em;
    line-height: 1;
  }
  .section-hero .kanopy-kids-promo {
    position: inherit;
    transform: translateY(20px);
    width: auto;
  }
  .section-hero .kanopy-kids-promo img {
    width: 220px;
  }
}

/* Tablet and Small Monitor Only */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .section-hero .kanopy-kids-promo {
    top: 240px;
  }
  .section-hero .kanopy-kids-promo img {
    width: 200px;
  }
}

/*
 * Module "section-press-quotes"
 */

.section-press-quotes {
  text-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-around;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.section-press-quotes blockquote {
  max-width: 200px;
  font-size: 1.15em;
  font-weight: normal;
  margin-right: 40px;
  letter-spacing: 0.01em;
}

.section-press-quotes blockquote:last-child {
  margin-right: 0;
}

.section-press-quotes {
  padding-top: 80px;
}

.section-press-quotes blockquote img {
  max-width: 100%;
}

.section-press-quotes blockquote footer {
  height: 20px;
  width: auto;
  margin-top: 20px;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-press-quotes {
    display: none;
  }
}

/* Tablet and Over */

@media screen and (min-width: 768px) {
  .section-press-quotes {
    justify-content: space-around;
  }
  .section-press-quotes blockquote.new-york-times {
    margin-right: 0;
  }
}

/* Desktop */

@media screen and (min-width: 1025px) {
  .section-press-quotes blockquote.new-york-times {
    margin-right: 40px;
  }
}

/*
 * Module "section-content-selection"
 */

.section-content-selection {
  text-align: center;
  background-color: black;
  color: white;
  text-align: center;
  padding-top: 1px;
}

.section-content-selection .container {
  overflow: hidden;
}

.section-content-selection .container.visible {
  overflow: visible;
}

.section-content-selection h3 {
  text-transform: uppercase;
  font-weight: bold;
  margin: 30px 0 20px;
  letter-spacing: 0.05em;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-content-selection .container.visible {
    overflow: hidden;
  }
}

/* Tablet and Up */

@media screen and (min-width: 768px) {
  .section-content-selection .container.visible {
    overflow: hidden;
  }
}

/*
 * Module "user-message"
 */

.user-message {
  width: 100%;
  background-color: black;
  color: white;
  padding: 35px 50px 35px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-left: 10px solid black;
}

.user-message.customer_dashboard {
    min-height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-left: none;
}

.user-message.customer_dashboard .banner-content {
    max-width: calc(100% - 120px);
    margin: auto;
    text-align: center;
}

.user-message.customer_dashboard a {
    text-decoration: none;
    color: #4c4d4c;

    background: none !important;
}

.user-message.customer_dashboard .view {
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
}

.user-message.customer_dashboard .title,
.user-message.customer_dashboard .subtitle {
    margin-right: 10px;
}

.user-message.customer_dashboard .title {
    font-size: 1.3em;
    font-weight: bold;
    color: #de3f00;
    line-height: 1.1;
    white-space: nowrap;
}

.user-message.customer_dashboard .view-now {
    min-width: 95px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.user-message.orange_side_and_button {
  border-left: 10px solid #de3f00;
}

.user-message.simple_message {
  padding: 20px 50px 20px 50px;
  font-size: 20px;
}

.user-message .user-message-title-subtitle .user-message-title, .user-message .user-message-title-subtitle .user-message-subtitle {
  align-self: center;
}

.user-message .user-message-title-subtitle .user-message-title {
  margin-left: 40px;
  font-size: 25px;
}

.user-message.default .user-message-title-subtitle .user-message-title {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.user-message.orange_side_and_button .user-message-title-subtitle .user-message-title {
  font-weight: 550;
}

.user-message.orange_side_and_button .user-message-title-subtitle .user-message-subtitle {
  border-left: 1px solid gray;
}

.user-message .user-message-title-subtitle .user-message-subtitle {
  font-size: 17px;
}

.user-message .user-message-title-subtitle {
  width: auto;
}

.user-message .user-message-close {
  position: absolute;
  top: 15px;
  right: 55px;
  z-index: 1;
  cursor: pointer;
  padding: 0.625rem 0rem 0rem 0rem;
}

.user-message .user-message-link {
  font-size: 15px;
}

.user-message.default .user-message-link {
  margin-top: 30px;
  display: inline-block;
  text-align: right;
  float: right;
}

.user-message.orange_side_and_button .user-message-link {
  border-radius: 4px;
  background: #de3f00;
  min-width: 140px;
  margin-right: 50px;
  margin-left: 25px;
  padding: 10px;
  font-weight: 550;
  text-align: center;
}

/* Desktop and Up */

@media screen and (min-width: 1025px) {
  .user-message .user-message-title-subtitle {
    display: flex;
  }
  .user-message .user-message-title-subtitle .user-message-title {
    padding-right: 25px;
  }
  .user-message .user-message-title-subtitle .user-message-subtitle {
    padding-left: 25px;
  }
}

/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .user-message {
    padding: 30px 30px 30px 0px;
  }
  .user-message.default .user-message-title-subtitle {
    display: block;
  }
  .user-message.orange_side_and_button .user-message-title-subtitle {
    display: flex;
  }
  .user-message.default .user-message-title-subtitle .user-message-title, .user-message.default .user-message-title-subtitle .user-message-subtitle {
    margin-left: 30px;
  }
  .user-message.orange_side_and_button .user-message-title-subtitle .user-message-title {
    padding-right: 25px;
  }
  .user-message.orange_side_and_button .user-message-title-subtitle .user-message-subtitle {
    padding-left: 25px;
  }
  .user-message .user-message-close {
    right: 35px;
  }
  .user-message.default .user-message-link {
    margin-top: 40px;
  }
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .user-message {
    padding: 18px 20px 18px 20px;
    margin-bottom: 10px;
  }
  .user-message .closeable {
    padding: 40px 20px 18px 20px;
  }
  .user-message .user-message-title-subtitle .user-message-title {
    font-size: 22px;
    margin-left: 0px;
    border-right: none !important;
  }
  .user-message .user-message-title-subtitle .user-message-subtitle {
    font-size: 15px;
  }
  .user-message .user-message-close {
    top: 5px;
    right: 20px;
  }
  .user-message .user-message-link {
    margin-top: 20px;
    display: block;
    float: none;
  }
  .user-message.default .user-message-link {
    font-size: 13px;
    text-align: left;
  }
  .user-message.orange_side_and_button .user-message-link {
    font-size: 15px;
    margin-right: 0px;
    margin-left: 0px;
  }
}

/*
 * Module "section-platforms"
 */

.section-platforms {
  text-align: center;
  height: 340px;
  background-color: black;
  color: white;
  margin-bottom: 240px;
}

.section-platforms h3 {
  font-weight: bold;
  padding: 30px 0 70px;
}

.webshop.front .section-platforms h4 {
  color: black !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-platforms .app-buttons img {
  padding-top: 10px;
  margin-right: 50px;
}

.section-platforms .app-buttons img:last-child {
  margin-right: 30px;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-platforms h3 {
    padding: 30px 0;
  }
  .section-platforms {
    height: 240px;
    margin-bottom: 260px;
  }
  .section-platforms .app-buttons img {
    margin-right: 10px;
  }
  .section-platforms .devices>img {
    width: 315px;
  }
}

/* Small-Phone Only */

@media screen and (max-width: 499px) {
  .section-platforms .devices>img {
    width: 100%;
  }
}

/*
 * Module "gradient"
 */

.gradient {
  background: #d12027;
  /* Old browsers */
  background: -webkit-linear-gradient( left, #d12027 0%, #e65525 22%, #f7901e 91%, #fdba12 100%);
  background: -webkit-gradient( linear, left top, right top, from(#d12027), color-stop(22%, #e65525), color-stop(91%, #f7901e), to(#fdba12));
  background: -o-linear-gradient( left, #d12027 0%, #e65525 22%, #f7901e 91%, #fdba12 100%);
  background: linear-gradient( to right, #d12027 0%, #e65525 22%, #f7901e 91%, #fdba12 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12027', endColorstr='#fdba12', GradientType=1);
  width: 100%;
  height: 3px;
}

/*
 * Module "nav-footer"
 */

.nav-footer {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav-footer.justify-content-normal {
  justify-content: normal !important;
}

.nav-footer li {
  margin-top: 10px;
  margin-right: 35px;
  font-weight: bold;
}

.webshop-switcher {
  align-items: center;
  display: flex;
}

/* 991px and Under */

@media screen and (max-width: 991px) {
  .nav-footer,
  .webshop-switcher {
    justify-content: center;
  }
  .nav-footer li {
    margin-right: 15px;
  }
  .webshop-switcher {
    margin-top: 20px;
  }
  .available-on {
    justify-content: center;
  }
  .copyright-row {
    margin-top: 20px;
  }
}

/* Tablet and Over */

@media screen and (min-width: 768px) {
  .nav-footer li:last-child {
    margin-right: 0;
  }
}

/*
 * Module "social-links"
 */

.social-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 10px !important;
}

.social-links li {
  margin-right: 32px;
}

.social-links li:last-child {
  margin-right: 0;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .social-links {
    justify-content: center;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }
}

.copyright-row {
  flex-shrink: 0; font-size: 13px;
}

.available-on {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* Tablet until 1224px (because 1224px is the moment the div.social-legal goes below the div.nav-available) */

@media only screen and (min-width: 768px) and (max-width: 1224px) {
  .social-links {
    justify-content: center;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }
}

.available-on .logo {
  height: 14px;
  width: unset;
}

/*
 * Module "legal-links"
 */

.legal-links {
  color: white;
  font-weight: 500;
  font-size: 14px;
  margin-top: 7px;
}

.legal-links>* {
  margin-right: 15px;
  white-space: nowrap;
}

.legal-links>*:last-child {
  margin-right: 0;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .legal-links>*:last-child {
    margin-top: 20px;
  }
}

/**
 * Module Account Credit Status
 */

.account-credit-status {
  border: 1px #f7590e solid;
  padding: 10px 8px 7px 8px;
}

/*
 * Module Search bar
 */

.global-nav.ui.menu .ui.search .results {
  text-transform: initial;
  letter-spacing: 0;
}

.webshop .search-bar-container, .vp .toggle-search-bar {
  display: none;
}

/*
 * Module "VP library acknowledgement"
 */

.library-acknowledgement {
  text-transform: uppercase;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.8em;
  color: white;
  padding-top: 100px;
  padding-bottom: 40px;
}

.library-acknowledgement blockquote {
  font-weight: bold;
  font-size: 1.2em;
  text-transform: initial;
}

/*
 * CSS for the Parental Controls PIN
 */

#parental_controls_pin_column_info {
  border-right: 1px solid gray;
  border-bottom: none;
}

.parental_controls_pin .forgot-pin, .parental_controls_pin .change-pin {
  padding: 9px 9px 9px 9px;
  background-color: transparent;
  color: gray;
  font-weight: bold;
  font-size: 1rem;
}

.parental_controls_pin.input {
  background-color: #0c0c0c !important;
  border: 1px solid #551d35 !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  color: white !important;
  text-align: center;
}

.parental_controls_pin.hide_pin {
  -webkit-text-security: disc;
}

@media screen and (min-width: 768px) {
  .parental_controls_pin.input {
    height: 100px !important;
    width: 90px !important;
    font-size: 60px !important;
    padding: 22px !important;
    margin-right: 5px !important;
  }
}

@media screen and (max-width: 767px) {
  #parental_controls_pin_column_info {
    border-right: none;
    border-bottom: 1px solid gray;
  }
  .parental_controls_pin.input {
    height: 70px !important;
    width: 63px !important;
    font-size: 42px !important;
    padding: 15px !important;
    margin-right: 4px !important;
  }
}

.parental_controls_pin_inputs .form-item {
  display: inline-block;
}

#pin-modal {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.parental_controls_pin .turn-on-off, .parental_controls_pin .turn-on-off:hover, .parental_controls_pin .turn-on-off:focus, .parental_controls_pin .save, .parental_controls_pin .save:hover, .parental_controls_pin .save:focus {
  padding: 9px 9px 9px 9px;
  background-color: #de3f00;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border: 2px solid #de3f00;
  color: white;
  font-weight: bold;
}

.parental_controls_pin .return-to-dashboard, .parental_controls_pin .return-to-dashboard:hover, .parental_controls_pin .return-to-dashboard:focus, .parental_controls_pin .cancel, .parental_controls_pin .cancel:hover, .parental_controls_pin .cancel:focus {
  padding: 9px 9px 9px 9px;
  background-color: transparent;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  color: white;
  font-weight: bold;
  border: 2px solid white;
}

/*
 * CSS for the MPAA RATING
 */

#classification_content {
  height: 100%;
  width: 100%;
  padding: 0;
}

@media screen and (min-width: 445px) and (max-width: 650px) {
  #classification_content {
    transform: scale(0.8);
  }
}

@media screen and (max-width: 444px) {
  #classification_content {
    transform: scale(0.6);
  }
}

/*
 * Module "Section header extended"
 */

.section-header-extended {
  background-color: black;
  color: white;
}

.section-header-extended h1 {
  text-transform: uppercase;
  line-height: 0.9;
  font-size: 42px;
  font-weight: bold;
  padding-bottom: 0.4em;
  padding-top: 1.2em;
}

.section-header-extended h1 .small {
  font-size: 0.9285rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
  font-weight: bold;
  line-height: 1;
  padding-bottom: 1em;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-header-extended h1 {
    font-size: 28px;
    padding-bottom: 0.5em;
    padding-top: 1.2em;
  }
  .section-header-extended h1 .small {
    padding-bottom: 0.6em;
  }
}

/*
 * Module "Section intro"
 */

.section-intro {
  padding: 4em 0 7em 0;
  background: #ffffff;
  position: relative;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-intro {
    padding-top: 1.5em;
    padding-bottom: 0;
  }
}

/*
 * Module "Section form"
 */

.section-form {
  padding: 2em 0 7em 0;
  position: relative;
}

.section-form .form-text {
  border-radius: 0 !important;
  height: 40px;
  padding: 0px;
  padding-left: 40px;
}

.section-form .form-textarea {
  border-radius: 0 !important;
}

.section-form label {
  font-weight: normal;
}

/*
     * Themes
     */

/* Dark */

.section-form.k-dark {
  background: #1a1a1a;
  color: #ccc;
}

/* Light */

.section-form.k-light {
  background: #ffffff;
  color: #1a1a1a;
}

.section-form.k-light a:not(.button) {
  color: #1a1a1a;
  text-decoration: underline;
  text-decoration-color: #ccc;
}

.section-form.k-light h2, .section-form.k-light h3, .section-form.k-light h4 {
  color: #1a1a1a !important;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-form {
    padding-top: 1.5em;
    padding-bottom: 0;
  }
}

/*
 * Module "Quotes"
 */

aside.quotes {
  width: 450px;
  position: absolute;
  right: 0;
  top: 50px;
  background-color: #f8f8f8;
}

aside.quotes p {
  margin-left: 25px;
  margin-right: 100px;
  font-style: italic;
  line-height: 1.5;
  text-indent: -0.5em;
}

aside.quotes p:first-child {
  margin-top: 40px;
}

aside.quotes p:after {
  content: "";
  width: 16px;
  height: 2px;
  background-color: #de3f00;
  display: block;
  margin-top: 10px;
}

aside.quotes p:last-child:after {
  content: "";
  width: 16px;
  height: 2px;
  background-color: #de3f00;
  display: none;
  margin-top: 10px;
}

aside.quotes footer {
  margin-left: 25px;
  padding-bottom: 40px;
}

/* Mobile and Tablet Only */

@media screen and (max-width: 991px) {
  aside.quotes {
    width: 100%;
    position: static;
    background-color: #f8f8f8;
    margin-top: 30px;
  }
}

/*
 * Module "Marketing Style"
 */

.marketing-style p {
  font-size: 1.11rem;
  line-height: 2;
  color: #333;
}

/* Not happy with this rule here... How to deal with black/white designs effectively? */

.marketing-style h2, .marketing-style h3 {
  color: rgba(0, 0, 0, 0.87) !important;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  /* Remove extra padding in stackable grid columns */
  .marketing-style .ui.stackable.grid>.column:not(.row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/*
 * Module "Section Kanopy Kids"
 */

.section-kanopy-kids {
  background: white url("/images/about-us/bg_kids-section.jpg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 684px;
  padding: 57px 0 75px 0;
}

.section-kanopy-kids .common-sense {
  display: flex;
  align-items: center;
  width: 70%;
}

.section-kanopy-kids .common-sense img {
  height: 42px;
  margin-left: 10px;
}

.section-kanopy-kids .common-sense p {
  margin-bottom: 0;
}

/* Tablet and Under */

@media only screen and (max-width: 991px) {
  .section-kanopy-kids {
    padding-bottom: 34em;
  }
}

/* Phone Only */

@media screen and (min-width: 500px) and (max-width: 767px) {
  .section-kanopy-kids {
    background-size: 100%;
    padding-bottom: 33em;
  }
  .section-kanopy-kids .common-sense {
    width: 100%;
  }
}

/* Small-Phone only */

@media screen and (max-width: 499px) {
  .section-kanopy-kids {
    background-size: contain;
    padding-bottom: 22em;
  }
  .section-kanopy-kids .common-sense {
    width: 100%;
  }
}

/*
 * Module "Section librarians"
 */

.section-librarians {
  padding: 50px 0;
  background-color: #f8f8f8;
}

/*
 * Module "Section Concluding CTA"
 */

.section-concluding-cta {
  padding: 50px 0;
  background-color: white;
}

.section-concluding-cta h2 {
  font-size: 1.7em;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
}

.section-concluding-cta .cta {
  margin-top: 15px;
}

.section-concluding-cta .devices, .section-concluding-cta .app-buttons {
  margin-top: 30px;
}

/*
 * Module "Section Library Clients"
 */

.section-library-clients {
  padding: 50px 0;
  background-color: white;
}

/* Phone and Under */

@media screen and (max-width: 767px) {
  .section-library-clients {
    padding-bottom: 2em;
  }
}

/*
 * Module "Warning Box"
 */

.warning-box {
  max-width: 500px;
  margin: 2em auto 2em auto;
  border: 2px solid #990303;
  /*red-ish*/
  padding: 2em;
  text-align: center;
}

/*
 * Module "Social Networks share"
 */

.social-networks-share {
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin: 8px 3px;
  padding: 0;
  border: none;
  background: url(/images/social_networks_icons.png) no-repeat scroll left top transparent;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: inline-block;
}

.social-networks-share:hover {
  -webkit-transform: translateY(-5%);
  -ms-transform: translateY(-5%);
  -moz-transform: translateY(-5%);
  transform: translateY(-5%);
  z-index: 5;
}

.social-networks-share.facebook-share {
  background-position: -174px 0;
}

.social-networks-share.twitter-share {
  background-position: -610px 0;
}

.social-networks-share.googleplus-share {
  background-position: -242px 0;
}

.social-networks-share.linkedin-share {
  background-position: -310px 0;
}

.social-networks-share.delicious-share {
  background-position: 0 0;
}

.social-networks-share.digg-share {
  background-position: -34px 0;
}

.social-networks-share.email-share {
  background-position: -102px 0;
}

.social-networks-share.pinterest-share {
  background-position: -412px 0;
}

/*
 * JS DataTables
 */

table.dataTable.inverted tbody tr {
  background-color: inherit;
}

.dataTables_wrapper {
  margin-top: 2em;
  margin-right: 2em;
}

/*
 * Module: About Kanopy Kids page
 */

.about-kanopy-kids {
  padding: 5em 0em;
}

.about-kanopy-kids-title {
  width: min(370px, 100%);
  font-family: Metropolis;
  font-size: 32px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.4px;
  color: #ffffff;
  margin-bottom: 1em;
}

.about-kanopy-kids p {
  font-size: 1.2rem;
  line-height: 28px;
  color: #fff
}

.logo-container {
  display: flex !important;
  justify-content: center;
}

.about-kanopy-kids img {
  width: 50%
}

#welcome_kanopy_kids_popup {
  text-align: center;
  padding: 5em 5em;
}

#welcome_kanopy_kids_popup h2 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  font-family: Metropolis;
  font-size: 26px;
  letter-spacing: 0.3px;
  text-align: center;
  color: #f9f9f9;
}

#welcome_kanopy_kids_popup p {
  margin: 0 auto;
  font-family: Metropolis;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.75;
  letter-spacing: 0.2px;
  text-align: center;
  color: #f9f9f9;
}

#welcome_kanopy_kids_popup img {
  width: 10em;
  margin-bottom: 2em;
}

#welcome_kanopy_kids_popup #start-watching {
  font-family: Metropolis;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.2px;
  text-align: center;
  color: #ffffff;
}

#welcome_kanopy_kids_popup #start-watching-container {
  margin-top: 3em;
}

#welcome_kanopy_kids_popup #do-not-show {
  cursor: pointer;
  margin-top: 3em;
  font-family: Metropolis;
  font-size: 18px;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.2px;
  text-align: center;
  color: #ffffff;
  text-decoration: underline;
}

#welcome_kanopy_kids_popup #do-not-show-container {
  margin-top: 3em;
}

@media (min-width: 767px) {
  #welcome-kids {
    width: 45em;
    left: 0%;
    right: 0%;
    margin-left: auto;
    margin-right: auto;
  }
  #welcome-kids-dont-show {
    width: 45em;
    left: 0%;
    right: 0%;
    margin-left: auto;
    margin-right: auto;
  }
  #welcome_kanopy_kids_popup #start-watching {
    width: 15em;
  }
  #welcome_kanopy_kids_popup #do-not-show {
    width: 15em;
  }
}

/* Onboarding
*/

.onboarding-stepper {
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.06);
}

.stepper-title {
  display: flex;
  justify-content: space-between;
  padding-bottom : 0.5em;
}

.stepper-asset {
  width: fit-content
}

.stepper-asset > img {
  width: 1.5em;
}

.stepper-step {
  font-family: Metropolis;
  font-size: 12px;
  font-weight: bold;
  color: black;
  text-transform: uppercase;
}

.stepper-help > a {
  font-family: Metropolis !important;
  font-size: 12px !important;
  color: #de3f00 !important;
  font-weight: bold;
  cursor: pointer;
}

/* Onboarding
*/

.onboarding-header {
  padding: 0 5.6vw;
}

.onboarding-nav {
  display: flex;
  justify-content: space-between;
  margin: 0 !important;
  width: 100%
}

.approve-deny {
  display: flex;
  justify-content: space-around
}

.loading-placeholder {
  margin-right: 3vw;
  min-height: 100px;
 }

 @keyframes placeHolderShimmer{
     0%{
         background-position: -468px 0
     }
     100%{
         background-position: 468px 0
     }
 }

 .animated-background {
     animation-duration: 1.25s;
     animation-fill-mode: forwards;
     animation-iteration-count: infinite;
     animation-name: placeHolderShimmer;
     animation-timing-function: linear;
     background: darkgray;
     background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
     background-size: 800px 104px;
     height: 8px;
     position: relative;
     margin-top: 16px;
 }


/*
 * Module "Section login"
 */

.section-login-column {
  padding-top: 3em;
  max-width: 600px;
  margin: auto;
}

.section-login-column .text-info {
  margin-bottom: 2em;
}

.section-login-column > h1 {
  color: black !important;
  font-weight: bold;
  padding-bottom: 8px;
  margin-bottom: 0;
  font-size: 36px;
  border-bottom: solid 1px rgba(166, 166, 166, 0.2);
}

.section-login-column .register {
  text-align: right;
  padding-top: 8px;
  font-size: 12px;
}

.section-login-column .register > a,
.section-login-column .forgot {
  color: #de3f00 !important;
  font-weight: bold;
  text-decoration: none !important;
}

.section-form.login .divider {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-bottom: 3em;
  box-shadow: 0 4px 2px -2px rgba(0,0,0,.06);
}

.section-login-column a.sociallogin.google,
.section-login-column a.sociallogin.facebook {
  text-decoration: none !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  font-size: 18px;
}

.section-login-column a.sociallogin.facebook {
  color: white;
}

.section-login-column label {
  display: none;
}

.section-login-column .column.name,
.section-login-column .column.pass {
  margin-bottom: 2em;
}

.section-login-column .form-item {
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 0 rgba(0,0,0,.1), 2px 2px 4px 0 rgba(0,0,0,.1);
  background-color: #ffffff;
}

.section-login-column input.error-border-red {
  border: solid 0.5px #c90000 !important;
}

.section-login-column input.error-border-red:focus {
  border: solid 0.5px #c90000 !important;
}

.section-login-column .ajax-status {
  margin-top: 4px;
}

.section-login-column .form-text {
  border-radius: 4px !important;
  border: solid 0.5px rgba(155, 155, 155, 0.5) !important;
  background-color: #ffffff;
  height: 54px;
}

.section-login-column .form-submit {
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  height: 48px;
  border-radius: 4px !important;
}

.section-login-column .ajax-status {
  text-align: left;
  color: #c90000;
  font-style: italic;
}


@media only screen and (max-width: 767px) {
  .section-login-column {
    padding-top: 1em;
    width: 90%;
  }

  .section-login-column > h1 {
    font-size: 20px;
  }

  .section-form.login .divider {
    padding-bottom: 1em;
  }

  .ui.grid > .column:not(.row) {
    padding-bottom: 0;
  }

  .section-login-column .column.submit {
    margin-bottom: 2em;
  }
}

/*
 * Mobile Product Page
 */

 #mobile-video-popup {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  height: 100%;
  background: black;
  text-align: center;
  line-height: 0;
 }

#mobile-video-popup .portrait-kanopy-logo {
  width: 10em;
  margin-bottom: 2em;
  margin-top: 2em;
}

#mobile-video-popup .thumbnail-wrapper {
  position: relative;
}

#mobile-video-popup .thumbnail > img {
  width: 100%;
}

#mobile-video-popup .shadow-box {
  position: absolute;
  top: 0em;
  padding-top: 5em;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0), #000000);
}

#mobile-video-popup .title {
  position: absolute;
  bottom: 0em;
  left: 0;
  width: 100%;
  margin-left:  auto;
  margin-right: auto;
  margin-bottom: 1em;
  font-family: Metropolis;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

#mobile-video-popup .title-tagline {
  position: absolute;
  bottom: 1em;
  left: 0;
  width: 100%;
  margin-left:  auto;
  margin-right: auto;
  margin-bottom: 1em;
  font-family: Metropolis;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

#mobile-video-popup .subtitle {
  position: absolute;
  bottom: 0em;
  left: 0;
  width: 100%;
  margin-left:  auto;
  margin-right: auto;
  margin-bottom: 1em;
  font-family: Metropolis;
  font-size: 18px;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

#mobile-video-popup .product-description {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: normal;
  color: #b9b9b9;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 2em;
}

#mobile-video-popup .product-description > div {
  margin: 0 0.3em 0.2em 0.3em;
}

#mobile-video-popup .product-description .ui.rating {
  font-size: 1.5rem;
}

#mobile-video-popup .product-footer {
  margin-top: 0.5em;
  max-width: 70vw;
  margin: auto
}

#mobile-video-popup .watch-kanopy {
  margin-left:  auto;
  margin-right: auto;
  font-family: Metropolis;
  font-size: 1.5em;
  line-height: 1.17;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding-bottom: 1em;
}

#mobile-video-popup .get-free-app {
  margin-left:  auto;
  margin-right: auto;
  font-family: Metropolis;
  font-size: 1.2em;
  line-height: 1.17;
  font-weight: bold;
  text-align: center;
  color: #fff;
  width: 100%;
}

#mobile-video-popup .divider {
  border: solid 1px #979797;
}

@media (orientation: landscape) {
  #mobile-video-popup .popup-wrapper {
    display:flex;
  }

  #mobile-video-popup .popup-content {
    flex: 1;
  }

  #mobile-video-popup .product-footer {
    flex: 1;
    align-self: center;
  }

  #mobile-video-popup .watch-kanopy {
    padding-top: 1em;
    max-width: 40vw;
  }

  #mobile-video-popup .divider {
    display: none;
  }
  #mobile-video-popup .portrait-kanopy-logo {
    display: none;
  }
  #mobile-video-popup .landscape-kanopy-logo {
    width: 50%
  }

  #mobile-video-popup .get-free-app {
    max-width: 40vw;
  }
}

@media (orientation: portrait) {

  #mobile-video-popup .landscape-kanopy-logo {
    display: none;
  }
}

@media (min-width: 768px) and (orientation: portrait) {

  #mobile-video-popup .watch-kanopy {
    font-size: 2em;
    max-width: 40vw;
  }
}

/*
 * Cart
 */
#perpetual_license_consent-wrapper {
    text-align: left;
    margin-left: 70%;
}

label[for=perpetual_license_consent]
{
    font-weight: bold !important;
}

/*
 * CSS for special dropdown
 */
.ui.dropdown.korange {
    height: 28px;
    width: 93px;
    border-radius: 4px;
    padding: 7px;
    background: #CD431D;
    color: white;
    font-weight: bold;
    display: inline-block;
    line-height: 16px;
}

.ui.dropdown.korange > .dropdown.icon:focus {
    outline: none;
}

.ui.active.dropdown.korange {
    border-color: black;
}

.ui.visible.korange > .text:not(.default) {
    color: white;
    font-weight: bold;
}

.ui.dropdown.korange .menu > .item {
    padding: 7px !important;
    font-size: 12px;
}

.ui.dropdown.korange > .dropdown.icon {
    padding-left: 8px;
}

a.button.korange {
    height: 28px;
    width: 93px;
    padding: 7px;
    background: #CD431D;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    line-height: 16px;
    text-align: center;
}

a.button.kwhite {
    height: 28px;
    width: 93px;
    padding: 6px;
    background: transparent;
    color: white;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    line-height: 16px;
    text-align: center;
    border: 1px solid white;
}

a.button.kwhite.big {
    height: auto;
    width: auto;
    padding: 9px;
}

.copy-button {
    cursor: pointer;
}