@charset "UTF-8";
/* Variables */
/***** GENERAL STYLES ******/
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #374c5b;
}

h1 {
  letter-spacing: -1px;
}

h1, h2, h3 {
  margin-bottom: 24px;
}

p {
  color: #354957;
}

.wp-block-accordion-heading {
  margin-bottom: 0 !important;
}

/***** HEADER PAGE *****/
/* Navbar section */
.my-navbar-container {
  position: relative;
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f7f7ff;
}
@media screen and (min-width: 576px) {
  .my-navbar-container {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .my-navbar-container {
    height: 96px;
    background-color: #fff;
    box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.07);
  }
}

.navbar-items-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 62px;
}
@media screen and (min-width: 768px) {
  .navbar-items-container {
    height: 96px !important;
  }
}

.heading-title {
  visibility: hidden;
}
@media screen and (min-width: 576px) {
  .heading-title {
    position: relative;
    top: 0;
    left: 0;
    color: #754fd0;
    width: 120px;
  }
}
@media screen and (min-width: 768px) {
  .heading-title {
    visibility: visible;
    top: 4px;
    left: 54px;
    width: auto;
  }
}

.my-navbar-container ul li {
  display: inline-block;
  margin-top: 18px;
  margin-left: 38px;
}

.my-navbar-container ul li:first-child {
  margin-left: 0;
  margin-left: -40px;
}

.my-navbar-container a {
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #4E3D89;
  text-decoration: none;
}

.my-navbar-container .navbar-text-logo-container {
  width: 115px;
  height: 41px;
  margin-left: 24px;
  position: absolute;
  top: 30px;
  left: 66px;
  background-repeat: no-repeat;
}

.navbar-elements {
  display: none;
}

/* Carousel controls */
.carousel-control-next,
.carousel-control-prev {
  width: auto;
  opacity: 1;
}

.carousel-control-next {
  right: -56px;
}

.carousel-control-prev {
  left: -56px;
}

@media screen and (min-width: 576px) {
  .carousel-control-next {
    right: -78px;
  }

  .carousel-control-prev {
    left: -78px;
  }
}

@media screen and (min-width: 768px) {
  .carousel-control-next {
    right: -96px;
  }

  .carousel-control-prev {
    left: -96px;
  }
}

@media screen and (min-width: 855px) {
  .carousel-control-next {
    right: -136px;
  }

  .carousel-control-prev {
    left: -136px;
  }
}

@media screen and (min-width: 992px) {
  .carousel-control-next {
    right: -150px;
  }

  .carousel-control-prev {
    left: -150px;
  }
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("../images/noun-arrow-2570178.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px 50px;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.carousel-control-next-icon {
  transform: rotate(-90deg);
}

.carousel-control-prev-icon {
  transform: rotate(90deg);
}

.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-prev:hover .carousel-control-prev-icon {
  transform: scale(1.04);
  opacity: 1;
}

.carousel-control-next:hover .carousel-control-next-icon {
  transform: rotate(-90deg) scale(1.04);
}

.carousel-control-prev:hover .carousel-control-prev-icon {
  transform: rotate(90deg) scale(1.04);
}

@media screen and (min-width: 768px) {
  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    width: 48px;
    height: 48px;
  }
}
.navbar-elements li a span {
  text-transform: uppercase;
  background-color: #e70caa;
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 1px 4px;
  margin-right: 4px;
  border-radius: 3px;
  position: relative;
  bottom: 2px;
}
@media screen and (min-width: 768px) {
  .navbar-elements {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
  }
}

.navbar-separator {
  visibility: hidden;
  color: rgba(147, 143, 158, 0.69) !important;
  margin: 0;
}

/***** FRONT-PAGE *****/
/* Main section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 36px;
  padding-bottom: 46px;
}
@media screen and (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .hero {
    padding-bottom: 96px;
  }
}

.hero-text {
  font-family: "Satoshi", sans-serif;
}

.main-title {
  font-style: normal;
  font-size: 24px;
  line-height: 127%;
  text-align: center;
  letter-spacing: -0.02em;
  color: #433E53;
  margin-top: 62px;
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .main-title {
    margin-top: 0;
    text-align: left;
    font-size: 27px;
  }
}
@media screen and (min-width: 992px) {
  .main-title {
    text-align: left;
    font-size: 33px;
  }
}

.main-title span {
  color: #8552ff;
}

.hero-main-copy {
  text-align: center;
  color: #423d50;
  margin-top: 36px;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%;
  width: 302px;
}
@media screen and (min-width: 768px) {
  .hero-main-copy {
    text-align: left;
    width: auto;
    font-size: 20px;
    line-height: 134%;
  }
}

.heading-image {
  background-image: url("~/assets/images/header-image.png");
  height: 206px;
  width: 200px;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  order: -1;
}
@media screen and (min-width: 768px) {
  .heading-image {
    order: 1;
  }
}

#main-display {
  background-color: #f7f7ff;
  padding-bottom: 36px;
  padding-top: 36px;
}
@media screen and (min-width: 768px) {
  #main-display {
    padding-top: 72px;
  }
}

/*
.arrow-one-container {
    position: relative;
    z-index: 10;

    @media screen and (min-width: 405px) {
        top: -36px;
        left: 70px;
    }

    @media screen and (min-width: 432px) {
        top: -66px;
        left: 90px;
    }

    @media screen and (min-width: 489px) {
        top: -86px;
        left: 160px;
    }

    @media screen and (min-width: 576px) {
        top: 34px;
        left: -80px;
    }

    @media screen and (min-width: 768px) {
      top: 34px;
      left: 50px;
    }

    @media screen and (min-width: 1400px) {
        left: 200px;
    }
}

.arrow-one-text {
    position: absolute;
    font-family: 'Mali', cursive;
    font-size: 19px;
    color: #817797;
    text-align: center;
    top: 217px;
    left: 197px;
    line-height: 1.1;
    transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);

    @media screen and (min-width: 576px) {
        font-size: 22px;
        top: -82px;
        left: 427px;
    }
}

.arrow-one {
    height: 90px;
    width: 95px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 260px;
    z-index: 1000;
    left: 203px;
    transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);

    @media screen and (min-width: 576px) {
        width: 150px;
        height: 170px;
        top: -40px;
        left: 410px;
    }
}
*/
.faux-carousel-card {
  background: #fff;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15);
  padding: 48px;
}

/* Landing steps */
#landing-steps {
  background-color: #f7f7ff;
  padding-top: 24px;
  padding-bottom: 36px;
  font-size: 18px;
  text-align: center;
}
@media screen and (min-width: 576px) {
  #landing-steps {
    padding-bottom: 96px;
  }
}

#landing-steps p {
  line-height: 1.4;
  margin-top: 12px;
  margin-bottom: 36px;
}
#landing-steps span {
  font-weight: 700;
  background-color: #8552ff;
  color: #fff;
  padding: 6px 11px;
  border-radius: 100%;
}

#landing-steps a {
  color: #8552ff;
  text-decoration: none;
}

.steps-group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 992px) {
  .steps-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 24px;
  }
}

.step-arrow {
  display: none;
  height: 30px;
  width: 42px;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  align-self: center;
}
@media screen and (min-width: 576px) {
  .step-arrow {
    display: flex;
    visibility: hidden;
  }
}
@media screen and (min-width: 992px) {
  .step-arrow {
    visibility: visible;
    margin-top: 112px;
  }
}

#step-arrow-1 {
  margin-left: 0;
  margin-right: 18px;
}

#step-arrow-2 {
  margin-left: 18px;
  margin-right: 0;
}

.step {
  padding-bottom: 64px;
}
@media screen and (min-width: 576px) {
  .step {
    width: 500px;
  }
}
@media screen and (min-width: 992px) {
  .step {
    width: 210px;
  }
}

#step-1-image {
  width: 170px;
  height: 200px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

#step-2-image {
  width: 210px;
  height: 200px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

#step-3-image {
  width: 170px;
  height: 200px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

/* Landing copy */
#copy-summary {
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
  background-color: #f7f7ff;
  padding-top: 48px;
  padding-bottom: 48px;
}
@media screen and (min-width: 992px) {
  #copy-summary {
    font-size: 18px;
  }
}

#copy-summary a {
  color: #8552ff;
}

/* Plugin section */
#copy-plugin {
  padding-top: 72px;
  padding-bottom: 72px;
}
@media screen and (min-width: 768px) {
  #copy-plugin {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}
@media screen and (min-width: 992px) {
  #copy-plugin {
    padding-top: 148px;
    padding-bottom: 148px;
  }
}

.copy-plugin-container p {
  color: #043961;
  text-align: left;
  line-height: 1.4;
  margin-top: 48px;
  font-family: "Satoshi", sans-serif;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .copy-plugin-container p {
    margin-top: 0;
  }
}
@media screen and (min-width: 992px) {
  .copy-plugin-container p {
    font-size: 18px;
  }
}

#copy-plugin a {
  text-decoration: none;
}

.plugin-moodle-directory-img {
  height: 100%;
  width: 242px;
  min-height: 242px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
}
@media screen and (min-width: 768px) {
  .plugin-moodle-directory-img {
    margin-right: unset;
  }
}

#moodle-img-bootstrap-grid-column {
  order: -1;
}
@media screen and (min-width: 768px) {
  #moodle-img-bootstrap-grid-column {
    order: 0;
  }
}

#copy-plugin .btn-primary {
  display: block;
  background: linear-gradient(115.35deg, #fd9e45 -23.09%, #ff7600 108.01%);
  border-color: transparent;
  margin-top: 36px;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.16);
}
@media screen and (min-width: 768px) {
  #copy-plugin .btn-primary {
    display: flex !important;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    height: 64px;
  }
}

#copy-plugin .btn-primary:hover,
#copy-plugin .btn-primary:active {
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0);
}

#moodle-plugin-download {
  position: relative;
}

#moodle-plugin-download:before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.6873 12.4124C1.92268 12.4124 2.14842 12.5059 2.31486 12.6723C2.4813 12.8387 2.5748 13.0645 2.5748 13.2999V16.7374C2.5748 17.049 2.6986 17.3478 2.91895 17.5682C3.13931 17.7886 3.43817 17.9124 3.7498 17.9124H20.2498C20.5614 17.9124 20.8603 17.7886 21.0807 17.5682C21.301 17.3478 21.4248 17.049 21.4248 16.7374V13.2999C21.4248 13.0645 21.5183 12.8387 21.6847 12.6723C21.8512 12.5059 22.0769 12.4124 22.3123 12.4124C22.5477 12.4124 22.7734 12.5059 22.9399 12.6723C23.1063 12.8387 23.1998 13.0645 23.1998 13.2999V16.7374C23.1998 17.5197 22.889 18.2701 22.3358 18.8233C21.7825 19.3765 21.0322 19.6874 20.2498 19.6874H3.7498C2.96742 19.6874 2.21707 19.3765 1.66384 18.8233C1.11061 18.2701 0.799805 17.5197 0.799805 16.7374V13.2999C0.799805 13.0645 0.893309 12.8387 1.05975 12.6723C1.22619 12.5059 1.45192 12.4124 1.6873 12.4124Z' fill='white'/><path fill-rule='evenodd' clip-rule='evenodd' d='M12.8882 12.6699L15.4975 10.0594C15.6641 9.89281 15.8901 9.79918 16.1257 9.79918C16.3613 9.79918 16.5872 9.89278 16.7538 10.0594C16.9204 10.226 17.014 10.4519 17.014 10.6875C17.014 10.9232 16.9204 11.1491 16.7538 11.3157L12.629 15.4405M12.8882 12.6699V1.06255C12.8882 0.82717 12.7947 0.60143 12.6282 0.434992C12.4618 0.268553 12.2361 0.175049 12.0007 0.175049C11.7653 0.175049 11.5396 0.268553 11.3731 0.434992C11.2067 0.60143 11.1132 0.827169 11.1132 1.06255V12.6699L8.50388 10.0594C8.33728 9.89281 8.11128 9.79918 7.87567 9.79918C7.64006 9.79918 7.4141 9.89278 7.2475 10.0594C7.0809 10.226 6.9873 10.4519 6.9873 10.6875C6.9873 10.9232 7.0809 11.1491 7.2475 11.3157L11.3723 15.4405M11.3723 15.4405C11.4547 15.5231 11.5528 15.5888 11.6605 15.6335ZM11.6605 15.6335C11.7683 15.6782 11.8839 15.7013 12.0007 15.7013ZM12.0007 15.7013C12.1174 15.7013 12.233 15.6782 12.3408 15.6335ZM12.3408 15.6335C12.4486 15.5888 12.5466 15.5231 12.629 15.4405Z' fill='white'/><path d='M15.4975 10.0594L12.8882 12.6699V1.06255C12.8882 0.82717 12.7947 0.60143 12.6282 0.434992C12.4618 0.268553 12.2361 0.175049 12.0007 0.175049C11.7653 0.175049 11.5396 0.268553 11.3731 0.434992C11.2067 0.60143 11.1132 0.827169 11.1132 1.06255V12.6699L8.50388 10.0594C8.33728 9.89281 8.11128 9.79918 7.87567 9.79918C7.64006 9.79918 7.4141 9.89278 7.2475 10.0594C7.0809 10.226 6.9873 10.4519 6.9873 10.6875C6.9873 10.9232 7.0809 11.1491 7.2475 11.3157L11.3723 15.4405L11.6605 15.6335L12.0007 15.7013L12.3408 15.6335L12.629 15.4405L16.7538 11.3157C16.9204 11.1491 17.014 10.9232 17.014 10.6875C17.014 10.4519 16.9204 10.226 16.7538 10.0594C16.5872 9.89278 16.3613 9.79918 16.1257 9.79918C15.8901 9.79918 15.6641 9.89281 15.4975 10.0594Z' fill='white'/></svg>");
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  top: 1px;
  left: -3px;
}

/* Thanks section */
#copy-thanks {
  color: #fff;
  padding-top: 48px;
  padding-bottom: 48px;
  background-position: top;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  #copy-thanks {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}
@media screen and (min-width: 992px) {
  #copy-thanks {
    padding-top: 148px;
    padding-bottom: 148px;
  }
}

#copy-thanks p {
  color: #fff;
}

.copy-thanks-container a {
  color: #fff;
  text-decoration: none;
}

.ioc-logo-img {
  width: 140px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
  margin-bottom: 48px;
}

a.rs-logo-contact {
  border-radius: 100%;
  display: block;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}

.rs-logo-img {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
  margin-bottom: 48px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}

a.rs-logo-contact:hover {
  background: #805fcd !important;
}

a.rs-logo-contact:hover .rs-logo-img {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Sign up section */
.sign-up-faux-layered-bckg {
  position: absolute;
  background-color: #E0DBED;
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.2);
  transform: rotate(1.79deg);
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  margin-top: 72px;
}
@media screen and (min-width: 576px) {
  .sign-up-faux-layered-bckg {
    height: 400px;
    width: 426px;
  }
}
@media screen and (min-width: 768px) {
  .sign-up-faux-layered-bckg {
    height: 360px;
    width: 576px;
  }
}
@media screen and (min-width: 992px) {
  .sign-up-faux-layered-bckg {
    height: 345px;
    width: 776px;
  }
}
@media screen and (min-width: 1200px) {
  .sign-up-faux-layered-bckg {
    height: 345px;
    width: 736px;
  }
}
@media screen and (min-width: 1400px) {
  .sign-up-faux-layered-bckg {
    height: 345px;
    width: 856px;
  }
}

.sign-up {
  position: relative;
  margin-top: 72px;
  padding: 43px 24px 35px 24px;
  background-color: #fff;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 576px) {
  .sign-up {
    padding: 55px 64px 47px 64px;
    height: 400px;
  }
}
@media screen and (min-width: 768px) {
  .sign-up {
    height: 360px;
  }
}
@media screen and (min-width: 992px) {
  .sign-up {
    height: 340px;
  }
}

.mailpoet-own-style-primary-text {
  text-align: left;
  color: #314f66 !important;
  font-size: 16px;
  line-height: 128%;
  letter-spacing: -0.007em;
  font-weight: 500;
}
@media screen and (min-width: 576px) {
  .mailpoet-own-style-primary-text {
    font-size: 18px;
    line-height: 132%;
  }
}
@media screen and (min-width: 768px) {
  .mailpoet-own-style-primary-text {
    font-size: 21px;
    line-height: 137%;
  }
}
@media screen and (min-width: 992px) {
  .mailpoet-own-style-primary-text {
    max-width: 500px;
  }
}

#mailpoet_form_1 input.mailpoet_submit {
  border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -ms-border-radius: 12px !important;
  -o-border-radius: 12px !important;
}

.mailpoet-own-style-secondary-text {
  font-size: 14px;
  line-height: 137%;
  color: #5c7282 !important;
}
@media screen and (min-width: 768px) {
  .mailpoet-own-style-secondary-text {
    font-size: 16px;
  }
}

/***** FOOTER PAGE *****/
/* Footer section */
.main-footer {
  background-color: #0a0e3c;
  color: #fff;
}
.main-footer p {
  color: #9a9fde;
  font-style: italic;
  text-align: center;
}
.main-footer p:first-of-type {
  padding-top: 36px;
  font-size: 14px;
}
.main-footer p.open-learning {
  color: #8d92d0;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.7px;
  margin-top: 36px;
  text-transform: uppercase;
}
.main-footer p.open-learning::before {
  content: url("data:image/svg+xml;charset=UTF-8, <svg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.42857 1.05124C9.99492 -2.59835 18.9116 3.78803 6.42857 12C-6.05445 3.78883 2.86222 -2.59835 6.42857 1.05124Z' fill='%238D92D0'/></svg>");
  display: inline-block;
  width: 13px;
  height: 12px;
  position: relative;
  top: 2px;
  left: -5px;
}
.main-footer a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

/* Side menu button */
#side-menu-button {
  background-color: #F1C935;
  background-repeat: no-repeat;
  background-position: center;
  border-color: #F1C935;
  height: 48px;
  width: 48px;
  border-radius: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 24px;
  margin-left: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.1);
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  z-index: 1100;
}

#side-menu-button:hover,
#side-menu-button:active {
  background-color: transparent;
  border: none;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.hamburger-icon {
  height: 16px;
  width: 18px;
}

.hamburger-icon svg {
  vertical-align: unset !important;
}

#side-menu-button .hamburger-line-one,
#side-menu-button .hamburger-line-two,
#side-menu-button .hamburger-line-three {
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
}

#side-menu-button.morphed .hamburger-line-one {
  transform: rotate(-45deg) translate(-8px, 11px);
  -webkit-transform: rotate(-45deg) translate(-8px, 11px);
  -moz-transform: rotate(-45deg) translate(-8px, 11px);
  -ms-transform: rotate(-45deg) translate(-8px, 11px);
  -o-transform: rotate(-45deg) translate(-8px, 11px);
}

#side-menu-button.morphed .hamburger-line-two {
  visibility: hidden;
}

#side-menu-button.morphed .hamburger-line-three {
  transform: rotate(45deg) translate(3px, -16px);
  -webkit-transform: rotate(45deg) translate(3px, -16px);
  -moz-transform: rotate(45deg) translate(3px, -16px);
  -ms-transform: rotate(45deg) translate(3px, -16px);
  -o-transform: rotate(45deg) translate(3px, -16px);
}

#side-menu-button:hover .hamburger-line-one,
#side-menu-button:active .hamburger-line-one,
#side-menu-button:hover .hamburger-line-two,
#side-menu-button:active .hamburger-line-two,
#side-menu-button:hover .hamburger-line-three,
#side-menu-button:active .hamburger-line-three {
  fill: #5D5180;
}

.current-menu-item {
  border-bottom: 6px solid #E9DFFB;
  padding-bottom: 29px;
  position: relative;
  top: 18px;
}

.current-menu-item a {
  font-weight: 700;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar menu */
.offcanvas-title {
  color: #754fd0;
}

.offcanvas-logo-title-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 16px 28px 16px;
}

/*
.sidebar-logo-image {
  height: 48px;
  width: 48px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  background-size: contain;
  margin-right: 12px;
}
*/
.my-sidebar .navbar-text-logo-container {
  width: 115px;
  height: 41px;
  margin-left: 77px;
  margin-top: 12px;
  position: relative;
  top: 2px;
  background-repeat: no-repeat;
}

.my-sidebar .offcanvas-header {
  padding: 0 !important;
}

.my-sidebar .offcanvas-header .btn-close {
  position: relative;
  right: 319px;
  top: 6px;
  background-color: #F1C935;
  border-radius: 100%;
  padding: 16px;
}

.my-sidebar .offcanvas-body {
  padding-top: 0 !important;
}

.sidebar-general-menu ul {
  list-style: none;
  padding-left: 0;
}

.sidebar-general-menu ul li {
  margin-top: 3px;
}

.sidebar-general-menu ul li a {
  font-weight: 500;
  font-size: 13px;
  color: #665e7b;
  text-transform: uppercase;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
}
.sidebar-general-menu ul li a span {
  text-transform: uppercase;
  background-color: #e70caa;
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 1px 4px;
  margin-left: 4px;
  border-radius: 3px;
  position: relative;
  bottom: 1px;
}

.sidebar-components-menu ul {
  list-style: none;
  padding-left: 0;
  margin-top: 24px;
}

.sidebar-components-menu ul li {
  padding: 6px 24px;
}

.sidebar-components-menu ul li a {
  text-decoration: none;
  display: block;
}

.sidebar-components-menu .submenu-title {
  padding-left: 19px;
  font-weight: bold;
}

.sidebar-components-menu .contextual-menu li a,
.sidebar-components-menu .procedural-menu li a,
.sidebar-components-menu .evaluative-menu li a,
.sidebar-components-menu .helper-menu li a {
  color: inherit;
}

.sidebar-components-menu .contextual-menu li:hover {
  background-color: #ECF4FF;
}

.sidebar-components-menu .contextual-menu li:hover a {
  color: #1679F9;
}

.sidebar-components-menu .contextual-menu .submenu-title {
  color: #1679F9;
  border-left: 4px solid #1679F9;
  background-color: #ECF4FF;
}

.sidebar-components-menu .procedural-menu li:hover {
  background-color: #FFF1F5;
}

.sidebar-components-menu .procedural-menu li:hover a {
  color: #D93562;
}

.sidebar-components-menu .procedural-menu .submenu-title {
  color: #D93562;
  border-left: 4px solid #D93562;
  background-color: #FFF1F5;
}

.sidebar-components-menu .evaluative-menu li:hover {
  background-color: #fff5e9;
}

.sidebar-components-menu .evaluative-menu li:hover a {
  color: #F5982B;
}

.sidebar-components-menu .evaluative-menu .submenu-title {
  color: #F5982B;
  border-left: 4px solid #F5982B;
  background-color: #fff5e9;
}

.sidebar-components-menu .helper-menu li:hover {
  background-color: #E5FFE1;
}

.sidebar-components-menu .helper-menu li:hover a {
  color: #3AAF2A;
}

.sidebar-components-menu .helper-menu .submenu-title {
  color: #3AAF2A;
  border-left: 4px solid #3AAF2A;
  background-color: #E5FFE1;
}

/* (index.php styles)

  .main-content {
    padding-top: 12px;
    padding-bottom: 72px;
  }

  .heading-block-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .heading-block-container h1 {
      margin-top: 0; 
      margin-bottom: 36px;
  }

  #heading-block {
    background-color: #fff;
}

.heading-logo h1 {
  display: block;
  font-weight: 400;
  font-size: 32px;
  color: #754fd0;
  width: 200px;
}
*/
/* (Classes afegides al codi de bloc de ClipboardJS)

#code-block-consell {
  font-size: 0.8rem; 
}

.code-block {
    position: relative;
    margin-top: 36px;
    margin-bottom: 48px;
    }

.code-block-button {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color:#F5F7F9;
    font-size: 12px;
    padding: 0.2rem 0.85rem;
    border-color: transparent;
}

.code-block-name-sign {
    position: absolute;
    top: 12px;
    left: -2px;
    color: #fff;
    background-color: #8552ff;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .5px;
}

pre[class*="language-"] {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-width: 0;
    background-color: #212529;
    padding-top: 48px;
}

*/
/* Comments (pàgines de la guia)

#comments {
  padding-bottom: 72px;
}

#respond #submit {
  color: #fff;
  background-color: #8552ff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 6px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, .16);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
}

.comment-form-comment {
    display: flex;
    flex-direction: column;
}
*/
/* (Unused)


.landing-main {
    background-color: #fafaff;
}

@media screen and (min-width: 576px) {
  .heading-block-container {
      flex-direction: row;
      align-items: flex-end;
    }

    .heading-block-container h1 {
      margin-bottom: 12px;
  }


  .heading-title-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  } 

  .navbar-separator {
    visibility: visible;
  }

}

@media (min-width: 768px) { 

  .heading-logo h1 {
    font-size: 34px;
    line-height: 1.1;
  }

}

@media (min-width: 992px) {

  .heading-logo h1 {
    font-size: 36px;
  }

  .heading-block-container {
      padding-top: 64px;
      padding-bottom: 64px;
  }

}

*/
.language-markup {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

.c4l-site-copy-text {
  font-size: 20px;
  margin-bottom: 36px;
}

.my-breadcrumb {
  display: inline-block;
  background-color: #f7f7ff;
  margin-top: 24px;
  margin-bottom: 36px;
  padding: 12px 14px;
  border-radius: 6px;
}

.bod-block-popup-overlay.active {
  background-color: rgba(0, 0, 0, 0.7);
}

.c4l-attribution-content.shown {
  opacity: 1;
}

/* Guide */
#guide-section {
  margin-top: 48px;
  margin-bottom: 96px;
}
#guide-section h1 {
  margin-bottom: 48px;
}

.guide-components-section {
  margin-top: 48px;
}
.guide-components-section h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.guide-components-section ul {
  border-left: 1px solid #b9b2ce;
  padding-left: 12px;
  margin-left: 2px;
  line-height: 30px;
}
.guide-components-section li {
  list-style: none;
}
.guide-components-section li a {
  text-decoration: none;
  color: #40485a;
  font-weight: 400;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: transparent;
}

#contextual-components li a:hover {
  background-color: #ECF4FF;
}

#procedural-components li a:hover {
  background-color: #FFF1F5;
}

#evaluative-components li a:hover {
  background-color: #fff5e9;
}

#helper-components li a:hover {
  background-color: #E5FFE1;
}

.guide-components-section h3 {
  font-size: 26px;
}
.guide-components-section p {
  font-size: 20px;
  font-family: Satoshi, sans-serif;
}
.guide-components-section#contextual-components img {
  height: 32px;
  margin-right: 12px;
  margin-top: -6px;
}
.guide-components-section#procedural-components img {
  height: 32px;
  margin-right: 12px;
  margin-top: -6px;
}
.guide-components-section#evaluative-components img {
  height: 32px;
  margin-right: 12px;
  margin-top: -6px;
}
.guide-components-section#helper-components img {
  height: 32px;
  margin-right: 12px;
  margin-top: -6px;
}

.guide-single-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* FAQs section */
.page-id-20 h1 {
  margin-top: 72px;
  margin-bottom: 48px;
}

.faqs-card {
  margin-bottom: 48px;
}
.faqs-card h3 {
  font-size: 20px;
  font-family: "Roboto";
  letter-spacing: 0;
}

.faqs-section-rs-logo {
  margin-top: 48px;
  margin-bottom: 96px;
  transform: rotate(12deg);
  width: 160px;
  margin-right: auto;
  margin-left: auto;
}

/* Adding icons to component titles */
.component-page-title {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
  border-radius: 4px;
  position: relative;
  top: 2px;
}
.component-page-title.contextual {
  background-color: #ECF4FF;
}
.component-page-title.procedural {
  background-color: #FFF1F5;
}
.component-page-title.evaluative {
  background-color: #fff5e9;
}
.component-page-title.helper {
  background-color: #E5FFE1;
}
.component-page-title.key-concept-icon {
  background-image: url("../images/c4l_keyconcept_icon.svg");
}
.component-page-title.tip-icon {
  background-image: url("../images/c4l_tip_icon.svg");
  background-size: 12px;
}
.component-page-title.reminder-icon {
  background-image: url("../images/c4l_reminder_icon.svg");
  background-size: 14px;
}
.component-page-title.quote-icon {
  background-image: url("../images/c4l_quote_icon.svg");
  background-size: 16px;
}
.component-page-title.do-dont-cards-icon {
  background-image: url("../images/c4l_dodontcards_icon.svg");
  width: 38px;
  background-size: 26px;
}
.component-page-title.reading-context-icon {
  background-image: url("../images/c4l_readingcontext_icon.svg");
  width: 36px;
  background-size: 24px;
  background-position: center 9px;
}
.component-page-title.example-icon {
  background-image: url("../images/c4l_example_icon.svg");
  background-size: 14px;
}
.component-page-title.figure-icon {
  background-image: url("../images/c4l_figure_icon.svg");
}
.component-page-title.tag-icon {
  background-image: url("../images/c4l_tag_icon.svg");
  background-size: 16px;
}
.component-page-title.inline-tag-icon {
  background-image: url("../images/c4l_inlinetag_icon.svg");
  width: 38px;
  background-size: 26px;
}
.component-page-title.attention-icon {
  background-image: url("../images/c4l_attention_icon.svg");
  background-size: 16px;
}
.component-page-title.estimated-time-icon {
  background-image: url("../images/c4l_estimatedtime_icon.svg");
  background-size: 16px;
}
.component-page-title.due-date-icon {
  background-image: url("../images/c4l_duedate_icon.svg");
}
.component-page-title.procedural-context-icon {
  background-image: url("../images/c4l_proceduralcontext_icon.svg");
}
.component-page-title.learning-outcomes-icon {
  background-image: url("../images/c4l_learningoutcomes_icon.svg");
}
.component-page-title.expected-feedback-icon {
  background-image: url("../images/c4l_expectedfeedback_icon.svg");
}
.component-page-title.grading-value-icon {
  background-image: url("../images/c4l_gradingvalue_icon.svg");
}
.component-page-title.all-purpose-card-icon {
  background-image: url("../images/c4l_allpurposecard_icon.svg");
  background-size: 14px;
}
.component-page-title.concept-review-icon {
  background-image: url("../images/c4l_conceptreview_icon.svg");
  background-size: 14px;
}
.component-page-title.further-reading-icon {
  background-image: url("../images/c4l_furtherreading_icon.svg");
  background-size: 14px;
}
.component-page-title.aiuseallowed-icon,
.component-page-title.ai-use-allowed-icon {
  background-image: url("../images/c4l_aiuseallowed_icon.svg");
}
.component-page-title.aiusenotallowed-icon,
.component-page-title.ai-use-not-allowed-icon {
  background-image: url("../images/c4l_aiusenotallowed_icon.svg");
}
.component-page-title.aiusereported-icon,
.component-page-title.ai-use-reported-icon {
  background-image: url("../images/c4l_aiusereported_icon.svg");
}

/* TODO Temporary overriding styles for Attribution Trigger component */
.attribution-trigger {
  min-width: 28px !important;
}

/* Accordion */
.c4l-site-inline-tag {
  font-weight: 900;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  display: inline-block;
  color: #fff;
  background: #3171e3;
  border-radius: 7px;
  padding: 2px 7px 1px;
  position: relative;
  top: -2px;
  margin-left: 4px;
  margin-right: 4px;
}

/* Accordion */
.wp-block-accordion .wp-block-accordion-item {
  border: 1px solid #e1e1e7;
  margin-bottom: 12px;
}
.wp-block-accordion .wp-block-accordion-heading {
  background-color: #f7f7ff;
  font-size: 18px;
  padding: 12px 24px;
}
.wp-block-accordion .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  font-size: 24px;
}
.wp-block-accordion .wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}
.wp-block-accordion .wp-block-group__inner-container {
  padding: 24px;
}

/* All-purpose card component does not accept images so temporarily we fake the component styles over a div element */
.pseudo-all-purpose-card .wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained {
  box-sizing: border-box;
  width: 75%;
  background-color: #f1f5fe;
  padding: 24px 36px 26px 36px;
  border: none;
  margin: 24px auto;
  position: relative;
  border-radius: 10px;
}

/*# sourceMappingURL=style-index.css.map */