/*******************************************************************************
******************************* NAVIGATION *************************************
$0 GENERAL
$1 NAVIGATION
$2 MOBILE NAV
$3 PRODUCTS
$4 LICENSE DETAIL
$5 CONTENT PAGES  (Impress, etc.)
$6 MEDIENVERWALTUNG
$7 FORMS
$8 HOME
$9 MODAL
$10 OVERWRITES
$11 BOOTSTRAP
$12 LOGIN / HEADER
$19 RESPONSIVE
$20 STARS
$21 SLIDES
$22 HEADER
*/

/* Additional styles for reduced motion */
body.reduced-motion * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

body.reduced-motion #mobile-toggle .fa-times,
body.reduced-motion #mobile-toggle .fa-bars {
  transition: none !important;
}

body.reduced-motion .mobile-offcanvas {
  transition: none !important;
}

/************************************************************************
$1 GENERAL
************************************************************************/

/* open-sans-regular - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/open-sans-v34-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../Fonts/open-sans-v34-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/open-sans-v34-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/open-sans-v34-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/open-sans-v34-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/open-sans-v34-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../Fonts/open-sans-v34-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../Fonts/open-sans-v34-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/open-sans-v34-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/open-sans-v34-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/open-sans-v34-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/open-sans-v34-latin-ext_latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/open-sans-v34-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../Fonts/open-sans-v34-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/open-sans-v34-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/open-sans-v34-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/open-sans-v34-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/open-sans-v34-latin-ext_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}


/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/roboto-v30-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../Fonts/roboto-v30-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/roboto-v30-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/roboto-v30-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/roboto-v30-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/roboto-v30-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../Fonts/roboto-v30-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../Fonts/roboto-v30-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/roboto-v30-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../Fonts/roboto-v30-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
       url('../Fonts/roboto-v30-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../Fonts/roboto-v30-latin-ext_latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
body {
  /* margin-top: 37px !important; */
}
header a {
  color: var(--dark-grey);
  font-size: 0.875rem;
}

header a:hover {
  color: var(--red);
}
#rocket {
  position: relative;
}
.btn
{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.btn:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 5px solid var(--dark-grey);
  outline-offset: 2px;
  text-decoration: underline;
  /* animation: focusOutlineAnim 0.8s ease-in-out infinite alternate; */
}

#rocket img {
  position: absolute;
  left: calc(57% - 390px);
  bottom: -90px;
  z-index: 1;
}

main h1 {
  font-size: 2.8rem;
  font-weight: 400;
}

#intro {
  font-size: 1rem;
  position: relative;
  z-index: 5;
}
#logo {
  position: relative;
  z-index: 2;
  top: -25px;
  text-align: right;
}

#logo img,
.resp-image {
  max-width: 100%;
  height: auto;
}
.icon {
  background: var(--blue);
  border-radius: 50%;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  color: var(--white);
  font-size: 2.8rem;
  margin-bottom: 20px;
  border: 5px solid var(--white);
  position: relative;
  /* Use flexbox for perfect centering */
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon svg {
  /* Remove margin-top since flexbox handles vertical centering */
  margin: 0;
}
section#clouds #c123650 {
  padding: 0 0 20px 0;
  /*background:  url(../Images/ufo.jpg) no-repeat calc(50% + 150px) bottom*/
}
#clouds a.btn-mb {
  font-size: .9rem;
  color: var(--white);
}
#clouds a.sso-button {
  background: var(--blue);
}
#clouds h2.mb-4 {
  margin-bottom:  1rem !important;
}
footer h3 {
  color: rgb(33, 37, 41);
  margin-bottom: 17px;
}

footer ul {
  margin: 0;
  padding: 0;
}

footer ul li {
  list-style: none;
  padding-left: 10px;
  margin-bottom: 4px;
}

footer ul li::before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #6a6a6a;
  position: relative;
  left: -10px;
}
footer {
  padding: 3% 0 2% 0;
  color: #6a6a6a;
  font-size: 0.9rem;
  border-top: 23px solid #0c3e55;
  margin-top: 20px;
}

footer a,
footer a:hover {
  color: #6a6a6a;
  text-decoration: none;
}
ul.typo3-messages {
  list-style-type: none;
  padding-left: 0;
}
.subtitle {
  color: var(--turquoise-light);
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1;
}
.typo3-messages li {
  list-style: none;
}

.btn-help .help-icon {
  padding: 2px 0 0 0;
}

.btn-help span{
  padding: 5px 3px 0 10px;
  font-size: 1em;
  font-weight: 600;
  float:right;
}

.btn-help.style-link{
    background: none;
    color: var(--red);
    text-transform: none;
    font-size: 1em;
    margin: 0;
}

.btn-help.style-link:hover,
.btn-help.style-link:focus,
.btn-help.style-link span:active,
.btn-help.style-link:visited{
    background: none !important;
    background-color: none !important;
    color: var(--red) !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.btn-help.style-link span{
    font-weight: normal;
}

.btn-help.style-link span:hover,
.btn-help.style-link span:active,
.btn-help.style-link span:focus
{
    text-decoration: underline !important;
}


/************************************************************************
$1 NAVIGATION
************************************************************************/
nav.mainnav{
    /* height: 76px; */
    background-color: #0B3A4E;
    /* margin-top: 37px; */
}

#subnavi .nav-item:first-child .nav-link {
  padding-left: 0;
}

.navbar {
  color: #fff;
  padding: 0;
  padding-bottom: 55px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  padding: 20px 10px 20px 15px;
  display: inline-block;
  position: relative;
}

.navbar a:hover {
  color: inherit;
  text-decoration: inherit;
}

.navbar,
.navbar ul li {
  margin: 0;
  padding: 0;
}

.navbar li {
  list-style: none;
  cursor: pointer;
}

.navbar li a .badge {
  position: absolute;
  left: 114px;
}

.navbar li:hover .subnav-content,
.navbar li.active .subnav-content {
  display: block;
}

.subnav-content:focus,
.navbar li:hover .subnav-content,
.navbar li:focus .subnav-content,
.navbar li:active .subnav-content {
  z-index: 999;
}

#menu-10274:hover,
#menu-10274.active,
#menu-10274 .subnav-content {
  background: var(--color-my-books);
}

#menu-10630:hover,
#menu-10630.active,
#menu-10630 .subnav-content {
  background: var(--color-my-books);
}

#menu-10625:hover,
#menu-10625.active,
#menu-10625 .subnav-content {
  background: var(--color-my-books);
}

#menu-10616:hover,
#menu-10616.active,
#menu-10616 .subnav-content,
#menu-10657:hover,
#menu-10657.active,
#menu-10657 .subnav-content {
  background: var(--color-my-books);
}

#menu-10396:hover,
#menu-10396.active,
#menu-10396 .subnav-content {
  background: var(--color-my-books);
}

#menu-10661:hover,
#menu-10661.active,
#menu-10661 .subnav-content {
  background: var(--color-my-books);
}

#menu-10669:hover,
#menu-10669.active,
#menu-10669 .subnav-content
{
  background: var(--color-my-books);
}

#menu-10703:hover,
#menu-10703.active,
#menu-10703 .subnav-content,
#menu-10704:hover,
#menu-10704.active,
#menu-10704 .subnav-content
{
  background: var(--color-my-books);
}



.mainnav>ul>li:not(.active):hover .subnav-content li a{
    border-color: transparent;
}

.mainnav>ul>li.active>a{
  border-right: 2px solid white;
  border-left: 2px solid white;
}

.subnav-content {
  display: none;
  background-color: red;
  z-index: 10;
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
.hamburger.sidebar-item {
  display: none;
}
.subnav-content li {
  display: inline-block;
}

#navbar_main {
  justify-content: initial;
}

.subnav-content li a {
  padding: 14px 16px;
  border-bottom: 3px solid transparent;
}

.subnav-content li a:hover,
.subnav-content li.active a {
  border-color: #fff;
}




.hide {
  display: none;
  visibility: hidden;
}


/**
* FeLogin
*/

.frame-type-felogin_login label,
.frame-type-felogin_login input:not([type="submit"]){
    width: 100%;
}

.frame-type-felogin_login label{
   margin-bottom: 0;
}

.frame-type-felogin_login input:not([type="submit"]){
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.frame-type-felogin_login input[type="submit"]{
    float:right;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    background: var(--red);
    color: var(--white);
    padding: 0.375rem 0.6rem 0.4rem 0.6rem;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .75rem;
    border-radius: 1.2rem;
    border: 0;
    color: #FFF;
    margin: 0 10px;
    /* display: inline-block; */
    text-align: center;
}

.frame-type-felogin_login>a{
    display:none !important;
}

@media (min-width: 850px) {
  .subnav-content {
    display: none;
    background-color: red;
    z-index: 10;
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
  }
}
.topnav {
  border-bottom: 0;
}
@media only screen and (min-width: 64em) {
  .topnav {
    height: 37px;
    max-height: 37px;
    /* overflow: hidden; */
  }

}
.header .navbar {
  border: none;
  border-bottom: 6px solid var(--green);
  margin-top: 7px;
}

.top-navigation a {
  line-height: 1.4;
  padding: 0;
  background: transparent;
  padding: 7px 0;
}

.top-navigation ul li {
  position: relative;
  background: transparent;
}

.top-navigation ul li span {
  width: 100%;
  padding: 0 8px;
  border-left: 1px solid #d9d9d9;
  position: relative;
}

.top-navigation ul li a:hover,
.top-navigation ul li a:focus,
.top-navigation ul li:focus-within a,
.top-navigation ul li a:active {
  background: #e2e2e2;
  color: var(--green);
  outline: none !important;
}

.top-navigation ul li:first-child a span {
  border-left: 1px solid transparent;
}

.top-navigation ul li.active a {
  color: #ffffff;
  background: var(--green);
}

.top-navigation ul li a:hover span,
.top-navigation ul li a:focus span,
.top-navigation ul li a:active span,
.top-navigation ul li.active a span {
  border-left: 1px solid transparent;
}

.top-navigation ul li.active a {
  border-left: 1px solid transparent;
  color: #ffffff;
}

.top-navigation ul li.active + li a span,
.top-navigation ul li:hover + li a span,
.top-navigation ul li:focus-within + li a span,
.top-navigation ul li:active + li a span {
  border-left: 1px solid transparent;
}

.top-navigation ul li a[target="_blank"] span {
  padding-left: 35px;
}

.top-navigation ul li a[target="_blank"] span::before {
  background-image: url(../Icons/shopicon@2x.png);
  background-size: 22px 22px;
  display: inline-block;
  width: 22px;
  height: 22px;
  content: "";
  position: absolute;
  top: 0;
  left: 9px;
}

.special-navigation a,
.special-navigation a:active,
.special-navigation a:focus,
.special-navigation a:hover {
  color: var(--white);
  background: var(--mint);
  font-size: 1em;
  line-height: 1.4;
  padding: 7px 16px;
}
.topnav {
  height: 37px;
  max-height: 37px;
}
header #navbar_main {
  background: var(--blue);
}
header ul#navbar_main:not(.show) {
  margin-top: 20px;
}
#navbar_main::before {
  content: " ";
  position: absolute;
  z-index: -1;
  background-color: var(--blue);
}
.nav-tabs {
  margin-bottom: 1.6rem;
  width: 100%;
  border-bottom: 1px solid var(--dark-grey);
}
.nav-tabs .nav-item {
  position: relative;
  background-color: transparent;
  padding: 0.7rem 0.8rem 0.7rem 0.8rem;
  margin-right: 0.5rem;
  color: var(--dark-grey);
}
.nav-tabs .nav-item a {
  color: inherit;
}
.nav-tabs .nav-item.nav-link.active {
  background-color: inherit;
}
.nav-tabs .nav-item > span {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  background: var(--dark-grey);
  z-index: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.nav-tabs .nav-item.active,
.nav-tabs .nav-item:hover,
.nav-tabs .nav-item:focus-visible {
 color: var(--text-color);
 border: 1px solid var(--dark-grey);
}

.nav-tabs .nav-item:focus-visible {
  border: 2px solid var(--dark-grey);
}


.nav-tabs .nav-item.active > span,
.nav-tabs .nav-item:hover > span,
.nav-tabs .nav-item:focus-visible > span {
  background: var(--red);
}
.nav-tabs .nav-item:focus-visible {
  outline-width: 0;
}

.nav-tabs .nav-item svg {
  color: var(--white);
}

.nav-tabs .nav-item:not(.active):hover {
  border: 1px solid transparent;
}

#mobile-toggle {
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: var(--red);
  border-radius: 35px;
  font-size: 2rem;
  box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 75%);
  color: var(--white);
  z-index: 1201;
  width: 70px;
  height: 70px;
  /* visibility: hidden; */
  display: none;
  /* Use flexbox for centering content */
  justify-content: center;
  align-items: center;
}

#mobile-toggle .fa-times {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  position: absolute;
  /* Center in parent using transform instead of fixed positioning */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(89deg) brightness(111%) contrast(101%);
}

.offcanvas-active #mobile-toggle .fa-times {
  visibility: visible;
  opacity: 1;
}

#mobile-toggle .fa-bars {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;
  position: absolute;
  /* Center in parent using transform instead of fixed positioning */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(89deg) brightness(111%) contrast(101%);
}

.offcanvas-active #mobile-toggle .fa-bars {
  visibility: hidden;
  opacity: 0;
}
.offcanvas-active #navbar_main.navbar:before {
  background: transparent url(../Images/mildenberger-logo-mobile-menu.png)
    no-repeat center center;
  background-size: contain;
  display: inline-block;
  width: 400px;
  height: 98px;
  margin-top: 20px;
  content: "";
  top: 0;
  transform: scale(1);
}

.offcanvas-active .navbar a {
  display: block;
  padding: 12px 5px 15px 40px;
}

.offcanvas-active .subnav-content {
  position: initial;
}

.offcanvas-active .subnav-content li {
  margin-left: 0;
  display: block;
  position: relative;
}

.offcanvas-active .subnav-content li:before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 0.8rem;
  position: absolute;
  left: 65px;
  top: 13px;
}

.offcanvas-active .subnav-content li:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.4);
}

.offcanvas-active .subnav-content li a {
  padding: 10px 16px 10px 80px;
  background-color: rgba(0, 0, 0, 0.2);
}

.offcanvas-active .subnav-content li a:hover {
  border-color: transparent;
  background-color: rgba(0, 0, 0, 0.3);
}

.offcanvas-active .fas-icon {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.offcanvas-active .fas-icon > a:beforenav {
  left: -15px;
}

#navbar_main.mobile-offcanvas.show {
  background: var(--blue) url(../Images/mobile-head-bg.jpg) no-repeat left top;
  padding-top: 140px;
}
.mobile-offcanvas.show + li {
  background: var(--blue);
}
.offcanvas-active #navbar_main li {
  margin-left: 0 !important;
}
.offcanvas-active .subnav-content li:first-child a {
  padding-top: 20px;
}
.offcanvas-active .subnav-content li a {
  border-bottom: 0;
}

.offcanvas-active #navbar_main > li:first-child {
  border-top: 30px solid var(--blue);
  padding-top: 15px;
  box-shadow: inset 0 8px 12px -3px rgba(0, 0, 0, 0.6);
  background: var(--blue);
}

.offcanvas-active #navbar_main li:first-child:before {
  top: 23px;
}
.offcanvas-header {
  display: none;
}
.backlink {
  color: var(--dark-grey);
  margin-bottom: 20px;
  display: block;
  text-decoration: none;
  font-weight: bold;
}
.backlink:hover {
  text-decoration: inherit;
  color: var(--dark-grey);
}
.backlink::before {
  content: "\f100";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  position: relative;
  left: -6px;
  top: 1px;
}

/************************************************************************
$1 MOBILE NAV
************************************************************************/
.off-canvas-navigation .logo {
  top: 8px;
}

.off-canvas-navigation .menu-item,
.off-canvas-navigation .sidebar-item {
  padding: 13px 10px 2px 10px;
}

.hamburger {
  color: var(--green);
}

.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  background-color: var(--green);
}

/************************************************************************
$3 PRODUCTS
************************************************************************/
#products .list-item {
  flex-grow: 1;
  padding: 0 10px;
  align-items: stretch;
  align-content: stretch;
  display: flex;
  flex-direction: column;
}

.product .cover {
  position: relative;
  overflow: hidden;
}

.product .cover > a:focus-visible{
  outline: 2px solid var(--red);
}

.product .name {
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 6px 0;
  font-size: 1.1em;
  font-weight: 600;
  margin: 15px 10px 5px 10px;
  -webkit-line-clamp: initial !important;
  display: block !important;
}

.product > .cover img,
.license-detail img {
  /*border: 1px solid #c0c0c0;*/
  width: 100%;
  height: auto;
}
.product .description .buttons {
  text-align: center;
}

.product .cover > img {
  /* position: absolute;
    bottom: 0;
    right:0;
    border: 1px solid #E6E6E6;
    max-height:248px; */
  width: 100%;
  min-width: 180px;
}

.product .cover .expire-warning{
  width: 137px;
  height: 41px;
  line-height: 1.1;
  font-size: 1em;
  font-weight: bold;
  position: absolute;
  top: 18px;
  left: 21px;
  text-align: center;
  color: var(--darker-grey);
  background-color: var(--light-grey);
  border-radius: 14px;
  padding: 5px 10px 5px 40px;
}

.product .cover .expire-warning .fa-exclamation-circle{
  font-size: 3em;
  position: absolute;
  left: -9px;
  top: -0.5px;
}

.product.collection .icon-folder-orange {
  position: absolute;
  bottom: 93px;
  right: 11px;
  z-index: 1;
}

.product.expired .cover img,
.product.expired .name {
  opacity: 0.7;
  filter: saturate(0);
}

.productlist {
  border-bottom: 1px solid var(--light-grey);
  margin-bottom: 3em;
}
.productlist a {
  position: relative;
}
.productlist svg {
  color: var(--white);
}
.productlist .svg-inline--fa {
  position: relative;
  z-index: 1;
  font-size: 1.1em;
  width: 1.1em;
  height: 1.1em;
  left: -0.18em;
  top: 0.1em;
}
.productlist .svg-inline--fa.fa-font {
  left: -0.2em;
  top: 0.05em;
}
.productlist .svg-inline--fa.fa-music {
  left: -0.25em;
}
.productlist a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--dark-grey);
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
.productlist li.active a::after,
.productlist li:hover a::after {
  background: var(--red);
}
.productlist li.active {
  border: 1px solid var(--light-grey);
  border-bottom: 0;
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  background: var(--white);
}
.productlist li {
  padding: 10px;
  position: relative;
  top: 1px;
}
.product .buttons
{
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 5px;
}
.product .btn-mb {
  font-size: 0.7rem;
}
.card {
  box-shadow: 0px 0px 5px var(--dark-grey);
}
form .card {
  box-shadow: none;
  border: 0;
}
.card-body {
  padding: 1.5rem 1.5rem 2.5rem 1.5rem;
}
#product-list .list-item {
  margin-bottom: 30px;
}
#product-list .product {
  box-shadow: 0px 0px 5px var(--dark-grey);
  position: relative;
  height: 100%;
  overflow: hidden;
}
#product-list .product .description {
  padding-bottom: 45px;
}
#product-list .product .description .buttons {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: left;
  padding: 0 0 1px 6px;
}
#product-list .product .description .buttons a {
  white-space: nowrap;
  margin-bottom: 10px;
}

#product-list .product .description .buttons a.btn-mb {
  margin: 0 0 4px 4px;
}
#product-list {
  margin-top: 30px;
}

/** INFO **********************************************************************/

.product .info {
  height: 100px;
  position: absolute;
  opacity: 0.9;
  background-color: #fff;
  width: 100%;
  box-shadow: inset 2px -20px 15px -20px #00000033;
  padding: 13px;
  font-weight: 600;
  font-size: 1.2em;
}

.product .info .title {
  border-bottom: 1px solid var(--dark-grey);
}

.product .trigger-info,
.product .trigger-info:hover,
.product .trigger-info:focus,
.product .trigger-info:active {
  color: var(--red);
  font-size: 1.5em;
  position: absolute;
  right: 5px;
  bottom: -1px;
  background: transparent;
  border: 0;
  outline: none;
}
/************************************************************************
$4 LICENSE DETAIL
************************************************************************/

.license-detail .data .row {
  padding: 10px;
}

.license-detail .data .row:last-child {
  margin-top: 30px;
}

.license-detail .data .row div:first-child {
  font-weight: bold;
}
.license-detail .button {
  margin-top: 20px;
  width: 200px;
}

.license-detail .product {
  float: none;
  margin: 0 auto;
  width: 180px;
}
.license-detail .data .row:first-child {
  padding-top: 0;
}
.license-detail .data .row:first-child a {
  color: var(--dark-grey);
  margin-bottom: 20px;
  display: block;
}
.license-detail .data .row:first-child a:hover {
  text-decoration: inherit;
}
.license-detail .data .row:first-child a::before {
  content: "\f100";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  position: relative;
  left: -6px;
  top: 1px;
}
.license-detail .data .row:last-child a.btn {
  margin-left: 0;
}
.license-detail .data .row:last-child a:not(.btn) {
  color: var(--dark-grey);
  margin-right: 8px;
}
.license-detail .data .row:nth-child(2n) {
  padding-top: 0;
  padding-bottom: 0;
}
.license-detail .data .row:nth-child(2n) .col-4,
.license-detail .data .row:nth-child(2n) .col-8 {
  background-color: var(--light-grey);
  padding-top: 7px;
  padding-bottom: 7px;
}
.license-detail .data h2 {
  margin-bottom: 20px;
}
.license-detail .row {
  margin: 12px -15px;
}
.license-detail .col-6,
.license-detail .col-6 .container {
  padding-left: 0;
}

.license-details .card-title {
  margin-bottom: 1.5rem;
}
.license-detail .expired {
  background: var(--red);
  padding: 1rem;
  color: var(--white);
}
.license-detail .cover {
  margin-bottom: 20px;
}
.license-detail a.btn {
  margin-bottom: 10px;
}

/************************************************************************
$5 CONTENT PAGES (Impress, etc.)
.termsofuse - Nutzungsbedingungen
.imprint - Impressum
.privacy - Datenschutz
body.help - HILFE
.schoolregister - REGISTRIERUNG SCHULE
************************************************************************/
.termsofuse h3,
.imprint h2,
.imprint h3,
.imprint h2,
.imprint h3,
.imprint h2,
.imprint h3,
.imprint h2,
.imprint h3,
.imprint h2,
.imprint h3,
.privacy h2,
.privacy h3 {
  margin: 3.2rem 0 1.5rem 0;
}
body.help .listing h2 {
  margin-bottom: 2rem;
}
body.help .listing .card {
  box-shadow: none;
  padding: 0;
}
body.help .card .card-header {
  padding: 0;
}
body.help .listing .card button {
  color: var(--blue);
  border-radius: 0;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1.25rem;
}
body.help .listing .card button:hover,
body.help .listing .card button:focus,
body.help .listing .card-header .btn.btn-link:not(.collapsed) {
  text-decoration: none;
  background: var(--blue);
  color: var(--white);
}
body.help .listing .card button:focus-visible {
  text-decoration: underline;
}
#c123340,
#c122661 {
  text-align: left;
}
#c123340 a.btn,
#c122661 a.btn {
  margin-bottom: 2rem;
}
#c122661 a.btn:first-child {
  margin-left: 0;
}
.schoolregister #intro h2 {
  margin-bottom: 0;
  color: #bac6cf;
  font-weight: 400;
  font-size: 1rem;
}

#c123650 p {
  margin-top: 3em;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

/************************************************************************
$6 MEDIENVERWALTUNG
************************************************************************/
table.dataTable th,
table.dataTable td {
  padding: 10px 5px 10px 10px;
}
table.dataTable th {
  box-shadow: none;
  border-bottom: 3px solid var(--dark-grey);
}

table.dataTable tr.selected .actions .svg-inline--fa {
  color: var(--text-color);
}
table.dataTable tr.selected .actions a:hover .svg-inline--fa {
  /* color: var(--light-green); */
}
table.dataTable th.sorting_asc:before,
table.dataTable th.sorting_asc:after,
table.dataTable th.sorting:before,
table.dataTable th.sorting:after {
  top: calc(50% - 13px);
}
table.dataTable th[data-data="action"] {
  padding-right: 13px;
}
table.dataTable th {
  z-index: 3;
  /* box-shadow: 2px 2px 6px -2px rgba(0, 0, 0, 0.2); */
}
.dataTables_filter input {
  border-radius: 1.2rem;
  padding-left: 0.8rem;
  background: var(--light-grey);
}
.dataTables_filter .form-control:focus {
  background: var(--light-grey);
  box-shadow: 0 0 0 0.2rem rgba(187, 23, 25, 0.25);
  border-color: var(--red);
}
.tx-schooladministration .form-control:focus {
  box-shadow: none;
}

/* SUBTABLE *******************************************************************/

.childTable {
  padding: 18px 0 12px 0;
  width: 95%;
  right: -2.5%;
}

table.dataTable tr.open + tr {
  background: var(--soft-grey);
}

table.dataTable tr.open + tr td {
  padding: 0;
}

table.dataTable tr.open + tr td .dataTables_wrapper th {
  padding: 3px 5px 3px 10px;
  border-bottom: 2px solid var(--dark-grey);
  font-weight: normal;
  background-color: transparent;
  font-size: 1em;
}

table.dataTable tr.open + tr td .dataTables_wrapper td {
  padding: 3px 5px 2px 10px;
}
#classes_datatable_wrapper
  table.dataTable
  tr.open
  + tr
  td
  .dataTables_wrapper
  th,
#pupils_datatable_wrapper table.dataTable .childTable th {
  visibility: hidden;
  padding: 0 !important;
}
table.dataTable tr.open + tr td .dataTables_wrapper tr:last-child > td {
  border-bottom: 0;
}
#classes_datatable_wrapper .dt-buttons button {
  margin-right: 0;
}
.dataTable {
  color: var(--dark-grey);
  margin-bottom: 0;
}

.dataTable .actions {
  font-size: 1rem;
  text-align: right;
}

.dataTable .actions a.disabled,
.dataTable .actions a.disabled:hover {
  color: var(--light-grey);
}

.dataTable .actions a {
  color: inherit;
}

.dataTable .actions .btn-alert {
  color: var(--white);
}
.dataTable .actions .btn-alert:hover {
  background: var(--red);
  color: var(--white);
}
.dataTable .actions a:hover {
  color: var(--red);
}

.dataTable tr.selected,
.dataTable tr.open {
  background: var(--light-grey);
  padding-left: 0;
  padding-right: 0;
}

.dataTable .dt-buttons {
  margin-right: 10px;
  display: inline;
}
.legend {
  color: #adadad;
  text-align: right;
}

.legend div {
  margin: 5px 18px 0 0;
  display: inline-block;
}

.legend div svg {
  margin-right: 5px;
}

.dataTable th {
  border-top: 0;
  background: var(--grey);
}

.dataTable button {
  padding: 0.375rem 0.7rem 0.4rem 0.7rem;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75rem;
  border-radius: 1.2rem;
  border: 0;
  color: var(--white);
  background: var(--red);
  color: var(--white);
}
/* opened row self ************************************************************/
table.dataTable tbody tr.selected td,
table.dataTable tbody tr.open td {
  background-color: var(--grey);
  border-bottom: none;
  font-weight: bold;
  color: var(--text-color);
}
/******************************************************************************/
.license-new,
.export-pupildata {
  background: var(--blue);
  color: var(--white);
}
.license-new .btn,
.export-pupildata .btn {
  background: var(--white);
  color: var(--blue);
}
.license-new h5 {
  font-size: 1.1rem;
}
#newSchool .card-title {
  margin-bottom: 2rem;
}
#newSchool label {
  width: 120px;
}
#newSchool input[type="text"] {
  width: calc(100% - 130px);
}
.align-center {
  text-align: center;
}
.align-center a {
  margin: 20px 0;
}
#recoveryKey.card {
  background: var(--blue);
  color: var(--white);
}
#c123444
  .tx-schooladministration
  .row:first-of-type
  .col-6:first-of-type
  .card {
  background: var(--blue);
  color: var(--white);
}
.tx-schooladministration h3 {
  margin-bottom: 2.5rem;
}
.tx-schooladministration h5 {
  font-weight: 600;
}
.tx-schooladministration .box {
  position: relative;
}
/* .tx-schooladministration .box::after
{
    position: absolute;
    right: -58px;
    top: calc(50% - 20px);
    font-family: "Font Awesome 5 Free";
    font-size: 2rem;
    font-weight: 900;
    color: var(--dark-grey);
    content: '\f054\f054';
}
.tx-schooladministration .col:last-child .box::after
{
    content: '';
} */
.feManagerValidation legend,
.feManagerValidation .alert.bg-danger .close,
.feManagerValidation .alert.bg-danger > h4 {
  display: none;
}

.feManagerValidation .form-group {
  margin-left: 0;
  margin-right: 0;
}
.feManagerValidation .femanager_conditionsAccepted {
  margin-bottom: 0;
}
.feManagerValidation .femanager_submit input {
  margin-right: 0;
}
#privateLicense,
#schoolLicense {
  margin-top: 30px;
}
.license-code {
  width: 100%;
  padding-bottom: 40px;
  /*    margin-bottom: 40px;*/

  border-bottom: 1px solid var(--nav-grey);
}
.license-code .btn {
  margin-top: 30px;
  margin-left: 0;
}
.ce-gallery .ce-column {
  margin: 0 20px 20px 0;
  /* width: 100%; */
}
.ce-gallery .ce-column figure {
  margin: 0 auto;
}
header .ce-gallery .ce-column {
  margin: 0;
  width: 100%;
}

/************************************************************************
$7 FORMS
************************************************************************/
label.form-label span,
label.control-label span {
  color: var(--red);
}
.form-group label {
  min-width: 80px;
  font-weight: 500;
  text-align: left;
  display: inline-block;
}

.form-group input.form-control {
  /* width: calc(100% - 150px); */
  border-radius: 0;
}
#actions {
  margin: 30px 0 20px 0;
  text-align: right;
  min-width: 180px;
}
/************************************************************************
$8 HOME
************************************************************************/
#home svg {
  position: relative;
  top: 1px;
}
#home .ce-headline-center {
  font-size: 2.5rem;
  margin: 1rem 0;
}
#loginbox h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
#quicklinks .container {
  z-index: 5;
  position: relative;
}
#jumpbox {
  color:  var(--white);
  margin: 20px 0 40px 0;
}
#jumpbox ul {
  margin: 0;
  padding: 5px 0px 5px 15px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 380px;
  background: rgba(7,36,50,.8);
  color: var(--white);
  border: 1px solid var(--dark-blue);
  margin: 20px 0 40px 0;
}
#jumpbox ul li {
  list-style: none;
  padding: 10px 0;
}
#jumpbox ul li a {
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#jumpbox ul li .icon {
  border: none;
  font-size:  1.1rem;
  width: 35px;
  height:  35px;
  margin-bottom: 0;
}
#jumpbox ul li .icon svg {
  margin-top: 4px;
  top: unset;
}

/* #quicklinks .container .row .col-md-3{
  overflow: hidden;
} */

#home a.btn {
  margin-bottom: 10px;
}

#quicklinks a {
  color: inherit;
  text-decoration: none;
}

#quicklinks::after {
  content: " ";
  display: inline-block;
  width: 100%;
  height: 0;
}

#quicklinks h4 {
  font-weight: normal;
}

#quicklinks {
  text-align: center;
}
#quicklinks .icon:hover {
  -webkit-animation: throb 2s infinite ease-in-out;
  animation: glow 2s infinite ease-in-out;
}
#quicklinks .icon::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  width: 40px;
  height: 40px;
  background: #bd1d1d;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  padding-top: 2px;
  left: calc(33% + 40px);
  top: calc(20% + 40px);
  position: absolute;
}
#info h2 {
  white-space: nowrap;
}

#loginbox nav {
  background: #35a0a6;
}
#jumpers {
  margin-top: 40px;
}
#loginbox nav a {
  border-radius: 0;
  margin: 4% 5% 0 5%;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  border-bottom: 5px solid #35a0a6;
}

#loginbox nav .fas,
#loginbox nav svg {
  margin-right: 10px;
}

#loginbox nav a.active,
#loginbox nav a:hover {
  background: none;
  border-bottom: 5px solid #fff;
}

#loginbox .card-text {
  margin: 20px 0 25px 0;
}
section#plattforms {
  border-top: 25px solid #0c3e55;
  border-bottom: 25px solid #0c3e55;
  background: rgb(16, 91, 126);
  background: linear-gradient(
    185deg,
    rgba(16, 91, 126, 1) 0%,
    rgba(9, 37, 50, 1) 100%
  );
  color: #fff;
  padding: 4% 0 0 0;
  overflow: hidden;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

section#plattforms .icon {
  border: 0;
  background: #fff;
  color: #002752;
  width: 68px;
  height: 68px;
  position: relative;
  top: -15px;
}

section#plattforms .icon > * {
  font-size: 2rem;
  margin-top: -9px;
}

section#plattforms #plattformsRocket img {
  position: absolute;
  right: -130px;
  top: 30px;
}

section#plattforms #plattformsSatellite img {
  position: absolute;
  top: 150px;
}

section#plattforms #plattformsComet img {
  position: absolute;
  left: 50%;
  top: 150%;
}
section#plattforms a.btn {
  margin-left: 0;
  margin-top: 10px;
}

#portfolio .container
{
  padding: 0 !important;
}
#portfolio .container:nth-child(2)
{
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-left: 1rem !important;
}
#portfolio .container:nth-child(odd) .two-column .col:first-child,
#portfolio .container:nth-child(even) .two-column .col:nth-child(2)
{
  padding: 0 !important;
}

#outro {
  background: transparent url(../Images/dish.png) no-repeat 80% bottom;
  min-height: 123px;
}
#home footer {
  border: 0;
  margin-top: 10px;
}
#award-wrapper
{
  position:  relative;
}
#award-logo
{
  position: absolute;
  top: -70px;
  right: 0;
  z-index: 3;
}
#award-wrapper.award-content #award-logo
{
  top: -130px;
}
#award-wrapper.award-content #award-logo img
{
  width: 100%;
}
/************************************************************************
$9 MODAL
************************************************************************/
.modal-dialog
{
  max-width:  95%;
}
.modal-dialog .form-group label {
  font-weight: 600;
}
.modal-dialog .modal-footer button:last-child {
  margin-right: 0;
}
.screen-overlay {
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition: opacity 0.2s linear, visibility 0.1s, width 1s ease-in;
}

.screen-overlay.show {
  transition: opacity 0.5s ease, width 0s;
  opacity: 1;
  width: 100%;
  visibility: visible;
}
/************************************************************************
$10 OVERWRITES
************************************************************************/
.subnav {
  margin-left: 0;
}
.subnav-pill > .active > a {
  background: none;
  color: var(--dark-grey);
}
.subnav-pill > * > a:hover {
  background: none;
}
.subnav > * > :first-child {
  text-transform: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading-2xlarge,
.heading-large,
.heading-medium,
.heading-small,
.heading-xlarge,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
}
.sso-login-form-wrapper,
.sso-loading-wrapper {
  position: fixed;
}

/************************************************************************
$11 BOOTSTRAP
************************************************************************/
.jumbotron {
  background: none;
  position: relative;
  color: #fff;
  background: rgb(37, 105, 137);
  border-radius: 0;
  background: linear-gradient(
    185deg,
    rgba(37, 105, 137, 1) 0%,
    rgba(9, 39, 53, 1) 100%
  );
  padding-bottom: 110px;
  overflow: hidden;
}

.jumbotron::after {
  content: "";
  position: absolute;
  background: transparent url(../Images/clouds.png) repeat-x left top;
  height: 110px;
  bottom: 0;
  left: 0;
  width: 100%;
}

.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
#plattforms h1,
#plattforms h2,
#plattforms h3 {
  color: #fff;
}
.jumbotron h1,
.jumbotron h2,
.jumbotron h3 {
  text-shadow: -1px -1px 4px hsl(198deg 72% 27%),
    -2px -2px 7px hsl(198deg 69% 15%), -2px -2px 10px hsl(198deg 75% 10%);
}
.jumbotron {
  padding-top: 5.5rem;
  padding-bottom: 5rem;
}

.jumbotron h5 {
  margin-bottom: 0;
  color: #bac6cf;
  font-weight: 400;
  font-size: 1rem;
}
/* #c123475 Intro HOME */
.jumbotron #c123475 a.btn:first-child {
  margin-left: 0;
}
.jumbotron #c123475 p:first-child {
  margin-bottom: 2.5rem;
}

/************************************************************************
$12 LOGIN / HEADER
************************************************************************/
#loginHeader {
  margin-left: auto;
}

#loginHeader .nav-link {
  min-width: 120px;
  height: 37px;
  max-height: 37px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

#loginHeader .nav-link .fas,
#loginHeader .nav-link svg {
  margin-right: 5px;
}

/* Updated for WCAG 2.2 AA compliance - better contrast */
#loginHeader .nav-link:hover,
#loginHeader .nav-link:focus,
#loginHeader .nav-link-opened {
  background: #595959; /* Darker gray for better contrast */
  color: #ffffff;
  text-decoration: underline;
  font-weight: 700;
  /* outline: 2px solid #000000; Visible focus outline */
}

#loginHeader {
  background: #d4d4d4;
  font-size: 0.8rem;
  color: #6b6b6b;
}

#loginHeader .border-r {
  border-right: 1px solid #8a8a8a;
}

#loginHeader p {
  font-size: 0.9rem;
}

#loginHeader h4 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2rem;
}

#loginHeader h4 svg,
#loginHeader h4 .fas {
  margin-right: 5px;
}
#loginHeader .password-reset {
  color: var(--black);
}

#intro .btn-invers-white {
  background: var(--blue);
}

#intro .btn-invers-white:hover {
  background: var(--red);
}

.btn-invers-grey {
  background: transparent;
  border: 1px solid var(--grey);
  color: var(--grey);
}

.btn-alert:hover {
  background: var(--red);
  color: var(--white);
}

.btn-invers-white:hover,
.btn-invers-grey:hover {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}
#login {
  min-height: 240px;
}


.listing nav{
  width: 100%;
}
/* Footer responsive styles for small screens */
@media (max-width: 375px) {
  footer .row .col-6,
  footer .row .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  footer .col-lg-5.text-right {
    text-align: left !important;
  }
}

/************************************************************************
$19 RESPONSIVE
************************************************************************/
/** 667px *********************************************************************/
@media only screen and (min-width: 41em) {
  .collection-container .ce-gallery .ce-column {
    margin: 0 18px 20px 18px;
    width: auto;
  }

  ul.subnav {
    display: flex;
    padding-left: 12px;
  }

  .subnav.subnav > li > a {
    line-height: 1.2;
  }

  ul.subnav li:first-child .icon-home {
    background-position: 6px -9px;
  }

  .data [class^="col-"] {
    float: left;
  }

  .data .col-8 {
    width: 66.66666667%;
  }

  .data .col-4 {
    width: 33.33333333%;
  }

  a.btn,
  button.btn,
  input.btn {
    width: auto;
  }
  /* .product{
        width: 25%;
        margin: 0 25px;
    } */
    .product .info {
        font-size: 0.75em;
      }
}
@media only screen and (max-width: 576px) {
  #product-list .listing nav .nav-item {
    width: 100%;
  }
  #product-list .listing nav .nav-item.active {
    border: 1px solid var(--grey);
    background: var(--red);
    color: var(--white);
  }
  #product-list .listing nav .nav-item.active::after svg {
    z-index: 20;
  }
  .btn-help-wrapper{
    text-align: center;
  }
}

/** 768px *********************************************************************/
@media only screen and (min-width: 48em) {
  .frame-space-before-medium {
    margin-top: 3em;
  }

  .collection-container .ce-gallery .ce-column {
    margin: 0 35px 20px 35px;
    width: auto;
  }
}
@media only screen and (max-width: 768px) {
  #logo {
    order: 1;
    z-index: 4;
  }
  #intro {
    order: 2;
  }
  #rocket {
    order: 3;
  }
  #rocket img {
    right: 5%;
    left: auto;
  }
  #plattformsComet,
  #plattformsSatellite,
  #plattformsRocket {
    display: none;
  }
  .hide {
    display: none;
  }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    display: inline-block !important;
    color: var(--black);
  }
  .box {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .box .col-mb-5,
  .box .col-mb-3 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

}
@media all and (max-width: 992px) {
    nav.mainnav{
       height: auto;
    }
  .jumbotron {
    /*padding: 3rem 2rem 5rem 2rem;*/
  }
  #header #c124094 .two-column .col:first-of-type
  {
    padding: 0;
  }
  #header h1
  {
    font-size: 2.55rem;
  }
  .offcanvas-header {
    display: block;
  }
  #mobile-toggle {
    visibility: visible;
    display: flex;
  }
  .mobile-offcanvas {
    visibility: hidden;
    transform: translateX(-100%);
    border-radius: 0;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1200;
    width: 400px;
    overflow-x: hidden;
    transition: visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .mobile-offcanvas.show {
    visibility: visible;
    transform: translateX(0);
  }
  #award-logo
  {
    position: relative;
    right: 0;
    top: -30px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
  }
  #award-logo a img
  {
    max-width: 80%;
  }
}
@media (min-width: 960px) {
  .fas-icon > a::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 1.5rem;
    position: relative;
    left: -5px;
    top: 1px;
  }
  #menu-10616 > a::before {
    content: "\f549";
  }
  #menu-10625 > a::before {
    content: "\f51c";
  }
  #menu-10630 > a::before {
    content: "\f5fd";
  }
  #menu-10274 > a::before {
    content: "\f02d";
  }
  #menu-10396 > a::before {
    content: "\f128";
  }
  #menu-10657 > a::before {
    content: "\f549";
  }
  #menu-10661 > a::before {
    content: "\f5da";
  }
  #menu-10669 > a::before {
    content:  "\f06b";
  }
  #menu-10703 > a::before,
  #menu-10704 > a::before{
    content: "\f0f3";
  }


  .subnav-content li:first-child {
    margin-left: calc(50% - 484px);
  }
  .hide {
    display: inline-block;
    visibility: visible;
  }
  table .hide {
    display: table-cell;
  }

  .navbar li a .badge {
    left: 35px;
  }
}
/**1024px**********************************************************************/
@media only screen and (min-width: 64em) {
  .row.two-column div[class^="col-"] {
    display: flex;
  }

  .cta div a {
    position: absolute;
    bottom: 0;
  }

  .cta > div[class^="col-"] {
    text-align: left;
  }

  .logo {
    background: #fff;
    padding: 11px 20px;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    /*border: 1px solid var(--nav-grey);*/
  }

  .collection-container .ce-gallery .ce-column {
    margin: 0 18px 20px 18px;
    width: auto;
  }

  .drop .drop {
    width: 185px;
  }

  .drop-item > span {
    margin-top: 9px;
    font-size: 0.7em;
  }

  .listing .accordion-content {
    padding-left: 5px;
  }

  .accordion.digital .accordion-content {
    padding-left: 55px;
  }

  .accordion .card-body img{
    max-width: 100% !important;
    height: auto !important;
  }

  .footer {
    background-position-x: 10px;
  }

  ul,
  .footer ul {
    margin-top: 20px;
  }

  .license-code {
    border-bottom: none;
  }
}

/**1090px**********************************************************************/
@media only screen and (min-width: 68em) {
  .collection-container .ce-gallery .ce-column {
    margin: 0 26px 20px 26px;
  }
  .product .info {
    font-size: 1em;
  }
}
@media (min-width: 1200px) {
  .navbar a {
    padding: 20px 20px 20px 30px;
  }
  .subnav-content li:first-child {
    margin-left: calc(50% - 570px);
  }
}

@media only screen and (max-width: 1200px) {
  #header .container::before
  {
    right: -55px !important;
    bottom: -81px !important;
  }

}
@media only screen and (max-width: 992px)
{
  #plattforms .row.two-column .col
  {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-inner
  {
    max-width: 45%;
  }
}
@media only screen and (max-width: 992px) {

  #header .container::before,
  #headerSlider
  {
    display: none;
    visibility: hidden;
  }
  #header .two-column.row .col:nth-child(even)
  {
    order: 1;
  }
  #header .two-column.row .col:nth-child(odd)
  {
    order: 2;
  }
  #header .two-column.row .col-md-6
  {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #portfolio .container:nth-child(even) .two-column.row .col:nth-child(even)
  {
    order:  1;
    margin-bottom: 0;
  }
  #portfolio .container:nth-child(even) .two-column.row .col:nth-child(odd)
  {
    order:  2;
  }
  #portfolio .container:nth-child(even) .two-column .col:first-child .icon,
  #portfolio .container:nth-child(odd) .two-column .col:nth-child(2) .icon
  {
    margin-top:  1rem;
  }
  #portfolio .container:nth-child(odd) .two-column .col:first-child
  {
    margin-bottom: 1rem;
  }
  #portfolio .container:nth-child(even)
  {
    padding-left: 0 !important;
  }
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-inner
  {
    max-width: 325px;
  }
}
@media only screen and (max-width: 550px) {
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-control-prev
  {
    left: 4%;
  }
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-control-next
  {
    right: 4%;
  }
}
@media only screen and (max-width: 500px) {

  .product .cover .expire-warning{
    left:16px;
  }
}
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-inner
  {
    max-width: 325px;
  }
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-control-prev
  {
    left: 4%;
  }
  #portfolio .carousel:not(#headerSlider):not(.sliderModal) .carousel-control-next
  {
    right: 4%;
  }
  .navbar li a .badge {
    left: 19px;
  }
}
@media only screen and (max-width: 992px) {

}
/***********************************************************************
$20 STARS
************************************************************************/
#starWrapper {
  z-index: 1;
  position: relative;
}

.stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1226px 1621px #fff, 1021px 1311px #fff, 589px 396px #fff,
    106px 950px #fff, 1628px 685px #fff, 1982px 1853px #fff, 683px 1196px #fff,
    885px 147px #fff, 140px 572px #fff, 1414px 202px #fff, 1287px 375px #fff,
    812px 233px #fff, 245px 366px #fff, 619px 1786px #fff, 158px 727px #fff,
    1051px 1759px #fff, 1232px 1572px #fff, 304px 515px #fff, 1107px 1063px #fff,
    1409px 293px #fff, 844px 1928px #fff, 1297px 766px #fff, 769px 53px #fff,
    1796px 1499px #fff, 1096px 1588px #fff, 6px 1066px #fff, 954px 1823px #fff,
    449px 1318px #fff, 742px 324px #fff, 1360px 430px #fff, 474px 517px #fff,
    1638px 553px #fff, 65px 362px #fff, 1668px 305px #fff, 618px 1791px #fff,
    1248px 698px #fff, 526px 1505px #fff, 443px 1738px #fff, 968px 744px #fff,
    1509px 1343px #fff, 940px 891px #fff, 1426px 313px #fff, 86px 1904px #fff,
    1852px 914px #fff, 1774px 1138px #fff, 1406px 378px #fff, 82px 384px #fff,
    1195px 1561px #fff, 472px 1994px #fff, 887px 708px #fff, 1078px 680px #fff,
    1715px 140px #fff, 333px 1224px #fff, 1538px 412px #fff, 1476px 644px #fff,
    976px 149px #fff, 938px 1127px #fff, 531px 1088px #fff, 996px 403px #fff,
    279px 1233px #fff, 1761px 1297px #fff, 1126px 1184px #fff, 1417px 375px #fff,
    1085px 1137px #fff, 669px 987px #fff, 1149px 1963px #fff, 1097px 880px #fff,
    1591px 85px #fff, 1858px 884px #fff, 1187px 1483px #fff, 1246px 415px #fff,
    126px 516px #fff, 1824px 672px #fff, 178px 250px #fff, 1675px 146px #fff,
    1827px 816px #fff, 803px 992px #fff, 1703px 1664px #fff, 1658px 970px #fff,
    1607px 1896px #fff, 268px 499px #fff, 465px 395px #fff, 287px 468px #fff,
    980px 1675px #fff, 1959px 1989px #fff, 429px 1263px #fff, 1419px 1703px #fff,
    302px 335px #fff, 1470px 698px #fff, 431px 1784px #fff, 1397px 1168px #fff,
    585px 143px #fff, 1163px 455px #fff, 1007px 1355px #fff, 764px 1147px #fff,
    1528px 1835px #fff, 1298px 1629px #fff, 438px 971px #fff, 1940px 1307px #fff,
    1767px 1080px #fff, 1700px 1582px #fff, 911px 709px #fff, 1733px 1916px #fff,
    1650px 1153px #fff, 1491px 1908px #fff, 1221px 1065px #fff, 389px 749px #fff,
    576px 602px #fff, 84px 1595px #fff, 1887px 1748px #fff, 1293px 1674px #fff,
    1372px 986px #fff, 834px 1280px #fff, 241px 777px #fff, 1122px 1540px #fff,
    908px 1032px #fff, 1715px 14px #fff, 732px 1014px #fff, 1888px 766px #fff,
    1433px 1174px #fff, 1273px 1889px #fff, 337px 301px #fff, 1449px 1878px #fff,
    946px 1411px #fff, 965px 181px #fff, 1508px 537px #fff, 977px 1648px #fff,
    696px 1932px #fff, 601px 305px #fff, 1734px 186px #fff, 1962px 1776px #fff,
    965px 791px #fff, 1563px 422px #fff, 1427px 822px #fff, 1540px 599px #fff,
    1246px 1681px #fff, 1271px 1136px #fff, 1411px 641px #fff,
    1108px 1981px #fff, 961px 1884px #fff, 788px 631px #fff, 172px 783px #fff,
    1729px 455px #fff, 1682px 1051px #fff, 911px 1455px #fff, 1652px 489px #fff,
    880px 94px #fff, 59px 747px #fff, 417px 223px #fff, 332px 1397px #fff,
    699px 659px #fff, 693px 728px #fff, 1232px 208px #fff, 1514px 774px #fff,
    1070px 633px #fff, 1768px 165px #fff, 1261px 1666px #fff, 35px 1979px #fff,
    54px 1408px #fff, 820px 745px #fff, 1732px 147px #fff, 1282px 1121px #fff,
    1640px 1px #fff, 1932px 632px #fff, 895px 31px #fff, 1751px 266px #fff,
    746px 54px #fff, 1197px 986px #fff, 1032px 658px #fff, 234px 1526px #fff,
    1267px 1176px #fff, 1280px 357px #fff, 1333px 381px #fff, 1739px 1375px #fff,
    888px 1325px #fff, 704px 550px #fff, 20px 359px #fff, 987px 1218px #fff,
    794px 1724px #fff, 774px 590px #fff, 1024px 227px #fff, 1487px 400px #fff,
    1446px 627px #fff, 984px 1342px #fff, 966px 703px #fff, 105px 1673px #fff,
    1225px 1267px #fff, 119px 1202px #fff, 1458px 273px #fff, 1057px 1167px #fff,
    116px 735px #fff, 665px 1021px #fff, 476px 1830px #fff, 145px 906px #fff,
    502px 596px #fff, 1629px 645px #fff, 728px 1972px #fff, 342px 605px #fff,
    1331px 179px #fff, 707px 1684px #fff, 388px 1757px #fff, 805px 73px #fff,
    659px 180px #fff, 848px 915px #fff, 182px 1550px #fff, 1955px 155px #fff,
    973px 1546px #fff, 1061px 1579px #fff, 52px 687px #fff, 1104px 1352px #fff,
    408px 1386px #fff, 1888px 1692px #fff, 956px 1018px #fff, 1355px 1568px #fff,
    1505px 1550px #fff, 1182px 705px #fff, 959px 1050px #fff, 498px 1432px #fff,
    301px 647px #fff, 443px 334px #fff, 1402px 461px #fff, 147px 1270px #fff,
    391px 1572px #fff, 1017px 341px #fff, 68px 1770px #fff, 235px 860px #fff,
    505px 816px #fff, 1312px 986px #fff, 1079px 1293px #fff, 324px 611px #fff,
    1179px 1011px #fff, 277px 434px #fff, 1767px 252px #fff, 1775px 1487px #fff,
    1705px 19px #fff, 326px 721px #fff, 378px 70px #fff, 895px 1736px #fff,
    1570px 365px #fff, 513px 615px #fff, 1092px 147px #fff, 1318px 1932px #fff,
    1592px 1734px #fff, 699px 918px #fff, 111px 388px #fff, 1067px 890px #fff,
    1169px 332px #fff, 358px 481px #fff, 1630px 750px #fff, 179px 1787px #fff,
    355px 489px #fff, 852px 821px #fff, 868px 364px #fff, 386px 1700px #fff,
    799px 1420px #fff, 1472px 644px #fff, 1552px 905px #fff, 48px 1998px #fff,
    1850px 51px #fff, 416px 678px #fff, 759px 1046px #fff, 1451px 1951px #fff,
    101px 1610px #fff, 1469px 912px #fff, 1214px 1292px #fff, 1368px 1018px #fff,
    484px 470px #fff, 816px 322px #fff, 1821px 1326px #fff, 327px 1936px #fff,
    752px 550px #fff, 1215px 1924px #fff, 180px 122px #fff, 784px 1924px #fff,
    1597px 336px #fff, 248px 1429px #fff, 4px 181px #fff, 1801px 1613px #fff,
    1581px 1719px #fff, 640px 1391px #fff, 960px 302px #fff, 1483px 1207px #fff,
    520px 1119px #fff, 25px 1754px #fff, 545px 317px #fff, 1573px 751px #fff,
    1415px 2px #fff, 101px 761px #fff, 679px 291px #fff, 1785px 676px #fff;
  animation: animStar 80s linear infinite;
}

.stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1226px 1621px #fff, 1021px 1311px #fff, 589px 396px #fff,
    106px 950px #fff, 1628px 685px #fff, 1982px 1853px #fff, 683px 1196px #fff,
    885px 147px #fff, 140px 572px #fff, 1414px 202px #fff, 1287px 375px #fff,
    812px 233px #fff, 245px 366px #fff, 619px 1786px #fff, 158px 727px #fff,
    1051px 1759px #fff, 1232px 1572px #fff, 304px 515px #fff, 1107px 1063px #fff,
    1409px 293px #fff, 844px 1928px #fff, 1297px 766px #fff, 769px 53px #fff,
    1796px 1499px #fff, 1096px 1588px #fff, 6px 1066px #fff, 954px 1823px #fff,
    449px 1318px #fff, 742px 324px #fff, 1360px 430px #fff, 474px 517px #fff,
    1638px 553px #fff, 65px 362px #fff, 1668px 305px #fff, 618px 1791px #fff,
    1248px 698px #fff, 526px 1505px #fff, 443px 1738px #fff, 968px 744px #fff,
    1509px 1343px #fff, 940px 891px #fff, 1426px 313px #fff, 86px 1904px #fff,
    1852px 914px #fff, 1774px 1138px #fff, 1406px 378px #fff, 82px 384px #fff,
    1195px 1561px #fff, 472px 1994px #fff, 887px 708px #fff, 1078px 680px #fff,
    1715px 140px #fff, 333px 1224px #fff, 1538px 412px #fff, 1476px 644px #fff,
    976px 149px #fff, 938px 1127px #fff, 531px 1088px #fff, 996px 403px #fff,
    279px 1233px #fff, 1761px 1297px #fff, 1126px 1184px #fff, 1417px 375px #fff,
    1085px 1137px #fff, 669px 987px #fff, 1149px 1963px #fff, 1097px 880px #fff,
    1591px 85px #fff, 1858px 884px #fff, 1187px 1483px #fff, 1246px 415px #fff,
    126px 516px #fff, 1824px 672px #fff, 178px 250px #fff, 1675px 146px #fff,
    1827px 816px #fff, 803px 992px #fff, 1703px 1664px #fff, 1658px 970px #fff,
    1607px 1896px #fff, 268px 499px #fff, 465px 395px #fff, 287px 468px #fff,
    980px 1675px #fff, 1959px 1989px #fff, 429px 1263px #fff, 1419px 1703px #fff,
    302px 335px #fff, 1470px 698px #fff, 431px 1784px #fff, 1397px 1168px #fff,
    585px 143px #fff, 1163px 455px #fff, 1007px 1355px #fff, 764px 1147px #fff,
    1528px 1835px #fff, 1298px 1629px #fff, 438px 971px #fff, 1940px 1307px #fff,
    1767px 1080px #fff, 1700px 1582px #fff, 911px 709px #fff, 1733px 1916px #fff,
    1650px 1153px #fff, 1491px 1908px #fff, 1221px 1065px #fff, 389px 749px #fff,
    576px 602px #fff, 84px 1595px #fff, 1887px 1748px #fff, 1293px 1674px #fff,
    1372px 986px #fff, 834px 1280px #fff, 241px 777px #fff, 1122px 1540px #fff,
    908px 1032px #fff, 1715px 14px #fff, 732px 1014px #fff, 1888px 766px #fff,
    1433px 1174px #fff, 1273px 1889px #fff, 337px 301px #fff, 1449px 1878px #fff,
    946px 1411px #fff, 965px 181px #fff, 1508px 537px #fff, 977px 1648px #fff,
    696px 1932px #fff, 601px 305px #fff, 1734px 186px #fff, 1962px 1776px #fff,
    965px 791px #fff, 1563px 422px #fff, 1427px 822px #fff, 1540px 599px #fff,
    1246px 1681px #fff, 1271px 1136px #fff, 1411px 641px #fff,
    1108px 1981px #fff, 961px 1884px #fff, 788px 631px #fff, 172px 783px #fff,
    1729px 455px #fff, 1682px 1051px #fff, 911px 1455px #fff, 1652px 489px #fff,
    880px 94px #fff, 59px 747px #fff, 417px 223px #fff, 332px 1397px #fff,
    699px 659px #fff, 693px 728px #fff, 1232px 208px #fff, 1514px 774px #fff,
    1070px 633px #fff, 1768px 165px #fff, 1261px 1666px #fff, 35px 1979px #fff,
    54px 1408px #fff, 820px 745px #fff, 1732px 147px #fff, 1282px 1121px #fff,
    1640px 1px #fff, 1932px 632px #fff, 895px 31px #fff, 1751px 266px #fff,
    746px 54px #fff, 1197px 986px #fff, 1032px 658px #fff, 234px 1526px #fff,
    1267px 1176px #fff, 1280px 357px #fff, 1333px 381px #fff, 1739px 1375px #fff,
    888px 1325px #fff, 704px 550px #fff, 20px 359px #fff, 987px 1218px #fff,
    794px 1724px #fff, 774px 590px #fff, 1024px 227px #fff, 1487px 400px #fff,
    1446px 627px #fff, 984px 1342px #fff, 966px 703px #fff, 105px 1673px #fff,
    1225px 1267px #fff, 119px 1202px #fff, 1458px 273px #fff, 1057px 1167px #fff,
    116px 735px #fff, 665px 1021px #fff, 476px 1830px #fff, 145px 906px #fff,
    502px 596px #fff, 1629px 645px #fff, 728px 1972px #fff, 342px 605px #fff,
    1331px 179px #fff, 707px 1684px #fff, 388px 1757px #fff, 805px 73px #fff,
    659px 180px #fff, 848px 915px #fff, 182px 1550px #fff, 1955px 155px #fff,
    973px 1546px #fff, 1061px 1579px #fff, 52px 687px #fff, 1104px 1352px #fff,
    408px 1386px #fff, 1888px 1692px #fff, 956px 1018px #fff, 1355px 1568px #fff,
    1505px 1550px #fff, 1182px 705px #fff, 959px 1050px #fff, 498px 1432px #fff,
    301px 647px #fff, 443px 334px #fff, 1402px 461px #fff, 147px 1270px #fff,
    391px 1572px #fff, 1017px 341px #fff, 68px 1770px #fff, 235px 860px #fff,
    505px 816px #fff, 1312px 986px #fff, 1079px 1293px #fff, 324px 611px #fff,
    1179px 1011px #fff, 277px 434px #fff, 1767px 252px #fff, 1775px 1487px #fff,
    1705px 19px #fff, 326px 721px #fff, 378px 70px #fff, 895px 1736px #fff,
    1570px 365px #fff, 513px 615px #fff, 1092px 147px #fff, 1318px 1932px #fff,
    1592px 1734px #fff, 699px 918px #fff, 111px 388px #fff, 1067px 890px #fff,
    1169px 332px #fff, 358px 481px #fff, 1630px 750px #fff, 179px 1787px #fff,
    355px 489px #fff, 852px 821px #fff, 868px 364px #fff, 386px 1700px #fff,
    799px 1420px #fff, 1472px 644px #fff, 1552px 905px #fff, 48px 1998px #fff,
    1850px 51px #fff, 416px 678px #fff, 759px 1046px #fff, 1451px 1951px #fff,
    101px 1610px #fff, 1469px 912px #fff, 1214px 1292px #fff, 1368px 1018px #fff,
    484px 470px #fff, 816px 322px #fff, 1821px 1326px #fff, 327px 1936px #fff,
    752px 550px #fff, 1215px 1924px #fff, 180px 122px #fff, 784px 1924px #fff,
    1597px 336px #fff, 248px 1429px #fff, 4px 181px #fff, 1801px 1613px #fff,
    1581px 1719px #fff, 640px 1391px #fff, 960px 302px #fff, 1483px 1207px #fff,
    520px 1119px #fff, 25px 1754px #fff, 545px 317px #fff, 1573px 751px #fff,
    1415px 2px #fff, 101px 761px #fff, 679px 291px #fff, 1785px 676px #fff;
}

.stars2 {
  position: relative;
  left: 20%;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 236px 1043px #fff, 784px 298px #fff, 594px 611px #fff,
    1790px 363px #fff, 1099px 831px #fff, 1619px 474px #fff, 903px 652px #fff,
    1472px 978px #fff, 1620px 1445px #fff, 1533px 1396px #fff, 303px 994px #fff,
    318px 1761px #fff, 1755px 263px #fff, 783px 482px #fff, 1224px 216px #fff,
    1625px 1456px #fff, 813px 1703px #fff, 1918px 1212px #fff, 1872px 799px #fff,
    280px 793px #fff, 1932px 99px #fff, 1925px 1863px #fff, 1444px 809px #fff,
    879px 484px #fff, 1283px 1275px #fff, 154px 1516px #fff, 1986px 404px #fff,
    526px 774px #fff, 540px 664px #fff, 953px 1818px #fff, 1931px 1100px #fff,
    1105px 92px #fff, 1290px 210px #fff, 1739px 33px #fff, 466px 1203px #fff,
    1821px 139px #fff, 1524px 269px #fff, 777px 1345px #fff, 116px 29px #fff,
    692px 10px #fff, 1165px 1444px #fff, 230px 1666px #fff, 1293px 811px #fff,
    1349px 414px #fff, 1598px 785px #fff, 1058px 1829px #fff, 1995px 1740px #fff,
    947px 614px #fff, 141px 1062px #fff, 1167px 248px #fff, 1366px 1098px #fff,
    811px 1344px #fff, 1723px 872px #fff, 1450px 1137px #fff, 1225px 1762px #fff,
    1766px 144px #fff, 1160px 1662px #fff, 931px 589px #fff, 937px 579px #fff,
    941px 592px #fff, 864px 681px #fff, 41px 995px #fff, 761px 1239px #fff,
    1890px 1598px #fff, 1262px 1800px #fff, 1990px 990px #fff, 1259px 880px #fff,
    1151px 1318px #fff, 352px 1485px #fff, 1345px 876px #fff, 1446px 945px #fff,
    1259px 1789px #fff, 1290px 374px #fff, 1388px 717px #fff, 32px 1673px #fff,
    1204px 862px #fff, 1184px 1186px #fff, 514px 574px #fff, 1625px 279px #fff,
    1491px 1821px #fff, 990px 398px #fff, 1552px 1243px #fff, 1427px 1528px #fff,
    222px 808px #fff, 732px 190px #fff, 12px 1378px #fff, 964px 444px #fff,
    317px 267px #fff, 1193px 161px #fff, 401px 716px #fff, 1399px 901px #fff,
    547px 318px #fff, 1365px 1943px #fff, 1083px 1137px #fff, 689px 251px #fff,
    833px 1431px #fff, 236px 177px #fff, 103px 1987px #fff, 320px 1421px #fff,
    1938px 1277px #fff, 1738px 1755px #fff, 777px 1942px #fff, 480px 1451px #fff,
    905px 1958px #fff, 993px 1429px #fff, 1748px 1796px #fff, 1596px 79px #fff,
    1355px 140px #fff, 1914px 261px #fff, 1027px 1239px #fff, 242px 534px #fff,
    1557px 192px #fff, 1884px 88px #fff, 1602px 296px #fff, 872px 307px #fff,
    998px 1373px #fff, 38px 1192px #fff, 763px 516px #fff, 1463px 925px #fff,
    1554px 147px #fff, 1322px 2000px #fff, 1885px 555px #fff, 1092px 1729px #fff,
    259px 735px #fff, 1852px 295px #fff, 49px 1307px #fff, 1111px 1808px #fff,
    1939px 643px #fff, 440px 1370px #fff, 1386px 657px #fff, 968px 611px #fff,
    1270px 1739px #fff, 870px 392px #fff, 1257px 765px #fff, 1106px 1530px #fff,
    1232px 1910px #fff, 1901px 1368px #fff, 1027px 1105px #fff,
    1787px 368px #fff, 735px 375px #fff, 1475px 825px #fff, 1836px 518px #fff,
    349px 1667px #fff, 1260px 495px #fff, 1799px 1574px #fff, 1018px 682px #fff,
    648px 995px #fff, 935px 577px #fff, 156px 1690px #fff, 602px 1920px #fff,
    1876px 384px #fff, 1561px 1362px #fff, 1446px 632px #fff, 1923px 209px #fff,
    1076px 1611px #fff, 738px 722px #fff, 1484px 1655px #fff, 137px 1339px #fff,
    1721px 541px #fff, 1544px 1082px #fff, 1083px 1601px #fff,
    1475px 1526px #fff, 1653px 1500px #fff, 451px 1136px #fff, 288px 372px #fff,
    290px 810px #fff, 1492px 814px #fff, 1508px 1379px #fff, 730px 1116px #fff,
    505px 929px #fff, 1775px 1887px #fff, 1942px 1091px #fff, 927px 1676px #fff,
    406px 992px #fff, 983px 626px #fff, 1356px 741px #fff, 1609px 936px #fff,
    313px 1244px #fff, 616px 984px #fff, 713px 1281px #fff, 1050px 844px #fff,
    1010px 104px #fff, 1858px 547px #fff, 429px 1678px #fff, 916px 763px #fff,
    418px 378px #fff;
  animation: animStar 150s linear infinite;
}

.stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 236px 1043px #fff, 784px 298px #fff, 594px 611px #fff,
    1790px 363px #fff, 1099px 831px #fff, 1619px 474px #fff, 903px 652px #fff,
    1472px 978px #fff, 1620px 1445px #fff, 1533px 1396px #fff, 303px 994px #fff,
    318px 1761px #fff, 1755px 263px #fff, 783px 482px #fff, 1224px 216px #fff,
    1625px 1456px #fff, 813px 1703px #fff, 1918px 1212px #fff, 1872px 799px #fff,
    280px 793px #fff, 1932px 99px #fff, 1925px 1863px #fff, 1444px 809px #fff,
    879px 484px #fff, 1283px 1275px #fff, 154px 1516px #fff, 1986px 404px #fff,
    526px 774px #fff, 540px 664px #fff, 953px 1818px #fff, 1931px 1100px #fff,
    1105px 92px #fff, 1290px 210px #fff, 1739px 33px #fff, 466px 1203px #fff,
    1821px 139px #fff, 1524px 269px #fff, 777px 1345px #fff, 116px 29px #fff,
    692px 10px #fff, 1165px 1444px #fff, 230px 1666px #fff, 1293px 811px #fff,
    1349px 414px #fff, 1598px 785px #fff, 1058px 1829px #fff, 1995px 1740px #fff,
    947px 614px #fff, 141px 1062px #fff, 1167px 248px #fff, 1366px 1098px #fff,
    811px 1344px #fff, 1723px 872px #fff, 1450px 1137px #fff, 1225px 1762px #fff,
    1766px 144px #fff, 1160px 1662px #fff, 931px 589px #fff, 937px 579px #fff,
    941px 592px #fff, 864px 681px #fff, 41px 995px #fff, 761px 1239px #fff,
    1890px 1598px #fff, 1262px 1800px #fff, 1990px 990px #fff, 1259px 880px #fff,
    1151px 1318px #fff, 352px 1485px #fff, 1345px 876px #fff, 1446px 945px #fff,
    1259px 1789px #fff, 1290px 374px #fff, 1388px 717px #fff, 32px 1673px #fff,
    1204px 862px #fff, 1184px 1186px #fff, 514px 574px #fff, 1625px 279px #fff,
    1491px 1821px #fff, 990px 398px #fff, 1552px 1243px #fff, 1427px 1528px #fff,
    222px 808px #fff, 732px 190px #fff, 12px 1378px #fff, 964px 444px #fff,
    317px 267px #fff, 1193px 161px #fff, 401px 716px #fff, 1399px 901px #fff,
    547px 318px #fff, 1365px 1943px #fff, 1083px 1137px #fff, 689px 251px #fff,
    833px 1431px #fff, 236px 177px #fff, 103px 1987px #fff, 320px 1421px #fff,
    1938px 1277px #fff, 1738px 1755px #fff, 777px 1942px #fff, 480px 1451px #fff,
    905px 1958px #fff, 993px 1429px #fff, 1748px 1796px #fff, 1596px 79px #fff,
    1355px 140px #fff, 1914px 261px #fff, 1027px 1239px #fff, 242px 534px #fff,
    1557px 192px #fff, 1884px 88px #fff, 1602px 296px #fff, 872px 307px #fff,
    998px 1373px #fff, 38px 1192px #fff, 763px 516px #fff, 1463px 925px #fff,
    1554px 147px #fff, 1322px 2000px #fff, 1885px 555px #fff, 1092px 1729px #fff,
    259px 735px #fff, 1852px 295px #fff, 49px 1307px #fff, 1111px 1808px #fff,
    1939px 643px #fff, 440px 1370px #fff, 1386px 657px #fff, 968px 611px #fff,
    1270px 1739px #fff, 870px 392px #fff, 1257px 765px #fff, 1106px 1530px #fff,
    1232px 1910px #fff, 1901px 1368px #fff, 1027px 1105px #fff,
    1787px 368px #fff, 735px 375px #fff, 1475px 825px #fff, 1836px 518px #fff,
    349px 1667px #fff, 1260px 495px #fff, 1799px 1574px #fff, 1018px 682px #fff,
    648px 995px #fff, 935px 577px #fff, 156px 1690px #fff, 602px 1920px #fff,
    1876px 384px #fff, 1561px 1362px #fff, 1446px 632px #fff, 1923px 209px #fff,
    1076px 1611px #fff, 738px 722px #fff, 1484px 1655px #fff, 137px 1339px #fff,
    1721px 541px #fff, 1544px 1082px #fff, 1083px 1601px #fff,
    1475px 1526px #fff, 1653px 1500px #fff, 451px 1136px #fff, 288px 372px #fff,
    290px 810px #fff, 1492px 814px #fff, 1508px 1379px #fff, 730px 1116px #fff,
    505px 929px #fff, 1775px 1887px #fff, 1942px 1091px #fff, 927px 1676px #fff,
    406px 992px #fff, 983px 626px #fff, 1356px 741px #fff, 1609px 936px #fff,
    313px 1244px #fff, 616px 984px #fff, 713px 1281px #fff, 1050px 844px #fff,
    1010px 104px #fff, 1858px 547px #fff, 429px 1678px #fff, 916px 763px #fff,
    418px 378px #fff;
}

.stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1948px 1304px #fff, 255px 1453px #fff, 146px 1809px #fff,
    1216px 205px #fff, 1418px 1507px #fff, 206px 1111px #fff, 734px 1490px #fff,
    1985px 1787px #fff, 188px 1154px #fff, 1447px 113px #fff, 1484px 1176px #fff,
    1495px 1763px #fff, 1597px 453px #fff, 1840px 1052px #fff, 655px 1587px #fff,
    1171px 1430px #fff, 1106px 410px #fff, 97px 1054px #fff, 714px 1158px #fff,
    1877px 1980px #fff, 181px 105px #fff, 1387px 1624px #fff, 485px 1406px #fff,
    1770px 1868px #fff, 1403px 770px #fff, 204px 1690px #fff, 300px 406px #fff,
    103px 364px #fff, 1376px 774px #fff, 1885px 753px #fff, 162px 822px #fff,
    1944px 1848px #fff, 500px 269px #fff, 317px 1205px #fff, 49px 905px #fff,
    1897px 1698px #fff, 1937px 84px #fff, 1831px 1273px #fff, 1244px 1355px #fff,
    731px 737px #fff, 1536px 802px #fff, 628px 394px #fff, 1582px 1266px #fff,
    1583px 668px #fff, 1548px 1611px #fff, 303px 945px #fff, 1749px 980px #fff,
    909px 732px #fff, 645px 808px #fff, 56px 1087px #fff, 1320px 1359px #fff,
    1053px 473px #fff, 1783px 834px #fff, 137px 1176px #fff, 786px 1701px #fff,
    656px 906px #fff, 620px 793px #fff, 1471px 423px #fff, 1046px 108px #fff,
    1849px 1270px #fff, 1152px 1323px #fff, 323px 623px #fff, 304px 1154px #fff,
    678px 1427px #fff, 734px 955px #fff, 1717px 674px #fff, 1974px 1431px #fff,
    859px 1871px #fff, 822px 1386px #fff, 1961px 1081px #fff, 750px 1690px #fff,
    1387px 547px #fff;
  animation: animStar 200s linear infinite;
}

.stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1948px 1304px #fff, 255px 1453px #fff, 146px 1809px #fff,
    1216px 205px #fff, 1418px 1507px #fff, 206px 1111px #fff, 734px 1490px #fff,
    1985px 1787px #fff, 188px 1154px #fff, 1447px 113px #fff, 1484px 1176px #fff,
    1495px 1763px #fff, 1597px 453px #fff, 1840px 1052px #fff, 655px 1587px #fff,
    1171px 1430px #fff, 1106px 410px #fff, 97px 1054px #fff, 714px 1158px #fff,
    1877px 1980px #fff, 181px 105px #fff, 1387px 1624px #fff, 485px 1406px #fff,
    1770px 1868px #fff, 1403px 770px #fff, 204px 1690px #fff, 300px 406px #fff,
    103px 364px #fff, 1376px 774px #fff, 1885px 753px #fff, 162px 822px #fff,
    1944px 1848px #fff, 500px 269px #fff, 317px 1205px #fff, 49px 905px #fff,
    1897px 1698px #fff, 1937px 84px #fff, 1831px 1273px #fff, 1244px 1355px #fff,
    731px 737px #fff, 1536px 802px #fff, 628px 394px #fff, 1582px 1266px #fff,
    1583px 668px #fff, 1548px 1611px #fff, 303px 945px #fff, 1749px 980px #fff,
    909px 732px #fff, 645px 808px #fff, 56px 1087px #fff, 1320px 1359px #fff,
    1053px 473px #fff, 1783px 834px #fff, 137px 1176px #fff, 786px 1701px #fff,
    656px 906px #fff, 620px 793px #fff, 1471px 423px #fff, 1046px 108px #fff,
    1849px 1270px #fff, 1152px 1323px #fff, 323px 623px #fff, 304px 1154px #fff,
    678px 1427px #fff, 734px 955px #fff, 1717px 674px #fff, 1974px 1431px #fff,
    859px 1871px #fff, 822px 1386px #fff, 1961px 1081px #fff, 750px 1690px #fff,
    1387px 547px #fff;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

@keyframes focusOutlineAnim {
  from {
    outline-offset: 2px;
  }
  to {
    outline-offset: 5px;
  }
}

/***********************************************************************
$21 SLIDES
************************************************************************/
.carousel.slide:not(#headerSlider):not(.sliderModal)::before
{
  content: '';
  background: url(../Images/laptop-slider.png) no-repeat center;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.carousel:not(#headerSlider):not(.sliderModal) .carousel-inner
{
  max-width: 55%;
  margin: 0 auto;
  padding: 20px 0 46px 0;
}

.carousel:not(#headerSlider):not(.sliderModal) .carousel-control-next,
.carousel:not(#headerSlider):not(.sliderModal) .carousel-control-prev
{
  height: 32px;
  width: 32px;
  background-color: var(--red);
  border-radius: 50%;
  display: inline-block;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 20%;
  top: unset;
}

.carousel:not(#headerSlider):not(.sliderModal) .carousel-control-next
{
  right: 13%;
}

.carousel:not(#headerSlider):not(.sliderModal) .carousel-control-prev
{
  left: 13%;
}

.carousel:not(#headerSlider):not(.sliderModal) .carousel-control-prev span
{
  left: -1px;
  position: relative;
}

#headerSlider
{
  z-index: 1;
  top:  9px;
  right: 30px;
}
#headerSlider::before
{
  background: none;
}

#header .two-column .col:nth-child(2)::before
{
}

#headerSlider .carousel-item
{
  min-height:  255px;
}

#headerSlider
{
  max-width: 425px;
  margin: auto;
}

#bookModal {
  margin: auto;
  background: rgba(0,0,0,0.3);
}

.modal .carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.modal .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.modal .carousel .carousel-item img
{
  width: 100%;
  height: auto;
}

.btn-gallery-open
{
  padding: 0.375rem 0.6rem 0.4rem 0.6rem;
  position: relative;
  text-transform: uppercase;
  letter-spacing: .15rem;
  font-weight: bold;
  font-size: .9rem;
  border-radius: 1.2rem;
  border: 0;
  color: var(--deep-blue);
  margin: 0 10px;
  background: #FFF;
  display: flex;
  margin: 0 auto;
  opacity:  .75;
}
.btn-gallery-open:hover,
.btn-gallery-open:focus
{
  background: var(--red);
  opacity: 1;
}

/***********************************************************************
$22 HEADER
************************************************************************/
#header .col{
  margin: 0 !important;
}
#header .container
{
  position: relative;
}
#header .container::before
{
    content: '';
    position: absolute;
    width: 607px;
    bottom: -75px;
    height: 434px;
    z-index: 1;
    right: -6px;
    background: url(../Images/laptop-slider-header.png) no-repeat center;
}

#header .two-column.row .col:nth-child(2)
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/******************************************************************************/
/*  NEWS
/******************************************************************************/


/* LIST view */
.news .footer{
  padding: 32px 0 0 0;
  border-top: 1px solid #eee;
}

.news .article h3 {
  margin-bottom: 1rem;
}


.news .article h3 a{
  color: #000;
}



.news .article .footer p,
.news .article .teaser-text p{
  margin-bottom: 3px;
}

.news .teaser-text{
    padding:  0 0 32px 0;
}


/* Single view */
.news-single .article .news-img-wrap {
    float: right;
    width: 282px;
    margin: 0 0 0 25px;
}

.news-single .footer {
  margin-bottom: 0;
  border-top: 0;
}
.news-single .article h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.news-single .article .teaser-text p{
    font-size: 15px;
    color: #888;
    margin-bottom: 20px;
}

.news-single .article .news-img-wrap img {
    max-width: 100%;
    height: auto;
}

/** pupil login error message *************************************************/

.pupil-login-error {
  text-align: center;
  min-height: 60px;
  border: 3px solid red;
  line-height: 4;
}

/** DEPRECATED: video_shariff styles - no longer used after migration to b13/twoclickmedia. Can be removed. */

.video-caption{
    margin-top: 5px;
    padding: 10px;
    border-left: 2px solid #BB1719;
}