/**
It looks like the breakpoint have changed.
https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

example:

@include breakpoint(md) {
     float: none;
     width: 100%;
}


**/
body {
  font-family: "Rubik", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #3B1837;
  font-size: 22px;
  letter-spacing: 0.73px;
  line-height: 36px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Rubik", sans-serif;
  font-style: normal;
  font-weight: 500; }

.no-padding {
  padding-right: 0px;
  padding-left: 0px; }

/**
----------------------- Sticky footer styles ----------------------- */
html {
  position: relative; }

.footer {
  bottom: 0;
  width: 100%;
  line-height: 100px;
  /* Vertically center the text there */ }

/**
----------------------- overwrite default bootstrap ----------------------- */
.footer a {
  color: #3B1837;
  text-decoration: underline;
  padding: 5px;
  border-radius: 5px;
  transition: background-color 0.5s, color 0.5s; }
  .footer a:hover {
    background-color: #3B1837;
    color: #fff;
    text-decoration: none; }

/**
----------------------- HUGE button ----------------------- */
.btn-xlg {
  font-family: "Rubik", sans-serif;
  font-style: normal;
  font-weight: 500;
  padding: .9rem 2rem;
  font-size: 40px;
  line-height: 2.5;
  border-radius: 24px;
  margin-top: 0px;
  margin-bottom: 50px;
  border: 1px solid #3B1837;
  text-align: left;
  transition: background-color 0.5s, box-shadow 0.5s, border-color 0.5s, margin-top 0.5s, margin-bottom 0.5s; }
  .btn-xlg:hover {
    margin-top: 2px;
    margin-bottom: 48px; }
  .btn-xlg.active:focus, .btn-xlg:active:focus, .btn-xlg:active, .btn-xlg:focus {
    margin-top: 4px;
    margin-bottom: 46px; }

/**
----------------------- homepage buttons ----------------------- */
.btn-home {
  display: none; }

.btn-thuis-en-familie {
  background-color: #682D61;
  border-color: #452241;
  box-shadow: 0 10px 0 0 #452241, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-thuis-en-familie:hover {
    background-color: #822C75;
    border-color: #452241;
    box-shadow: 0 8px 0 0 #452241, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-thuis-en-familie.active:focus, .btn-thuis-en-familie:active:focus, .btn-thuis-en-familie:active, .btn-thuis-en-familie:focus {
    background-color: #452241 !important;
    border: 1px solid #452241;
    box-shadow: 0 6px 0 0 #452241, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-mijn-lichaam {
  background-color: #0F9CB4;
  border-color: #006F98;
  box-shadow: 0 10px 0 0 #006F98, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-mijn-lichaam:hover {
    background-color: #13A8BF;
    border-color: #006F98;
    box-shadow: 0 8px 0 0 #006F98, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-mijn-lichaam.active:focus, .btn-mijn-lichaam:active:focus, .btn-mijn-lichaam:active, .btn-mijn-lichaam:focus {
    background-color: #006F98 !important;
    border: 1px solid #006F98;
    box-shadow: 0 6px 0 0 #006F98, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-mijn-gevoel {
  background-color: #EEAC11;
  border-color: #CA7A19;
  box-shadow: 0 10px 0 0 #CA7A19, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-mijn-gevoel:hover {
    background-color: #F7BD0C;
    border-color: #CA7A19;
    box-shadow: 0 8px 0 0 #CA7A19, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-mijn-gevoel.active:focus, .btn-mijn-gevoel:active:focus, .btn-mijn-gevoel:active, .btn-mijn-gevoel:focus {
    background-color: #CA7A19 !important;
    border: 1px solid #CA7A19;
    box-shadow: 0 6px 0 0 #CA7A19, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-op-school {
  background-color: #2A8356;
  border-color: #0D5832;
  box-shadow: 0 10px 0 0 #0D5832, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-op-school:hover {
    background-color: #1C9456;
    border-color: #0D5832;
    box-shadow: 0 8px 0 0 #0D5832, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-op-school.active:focus, .btn-op-school:active:focus, .btn-op-school:active, .btn-op-school:focus {
    background-color: #0D5832 !important;
    border: 1px solid #0D5832;
    box-shadow: 0 6px 0 0 #0D5832, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-verliefd-en-verkering {
  background-color: #F07684;
  border-color: #E23F3F;
  box-shadow: 0 10px 0 0 #E23F3F, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-verliefd-en-verkering:hover {
    background-color: #FF8593;
    border-color: #E23F3F;
    box-shadow: 0 8px 0 0 #E23F3F, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-verliefd-en-verkering.active:focus, .btn-verliefd-en-verkering:active:focus, .btn-verliefd-en-verkering:active, .btn-verliefd-en-verkering:focus {
    background-color: #E23F3F !important;
    border: 1px solid #E23F3F;
    box-shadow: 0 6px 0 0 #E23F3F, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-vrienden-en-vriendinnen {
  background-color: #E62926;
  border-color: #A0201E;
  box-shadow: 0 10px 0 0 #A0201E, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-vrienden-en-vriendinnen:hover {
    background-color: #F72623;
    border-color: #A0201E;
    box-shadow: 0 8px 0 0 #A0201E, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-vrienden-en-vriendinnen.active:focus, .btn-vrienden-en-vriendinnen:active:focus, .btn-vrienden-en-vriendinnen:active, .btn-vrienden-en-vriendinnen:focus {
    background-color: #A0201E !important;
    border: 1px solid #A0201E;
    box-shadow: 0 6px 0 0 #A0201E, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-pesten {
  background-color: #665C46;
  border-color: #483C22;
  box-shadow: 0 10px 0 0 #483C22, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-pesten:hover {
    background-color: #786849;
    border-color: #483C22;
    box-shadow: 0 8px 0 0 #483C22, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-pesten.active:focus, .btn-pesten:active:focus, .btn-pesten:active, .btn-pesten:focus {
    background-color: #483C22 !important;
    border: 1px solid #483C22;
    box-shadow: 0 6px 0 0 #483C22, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.btn-leuke-dingen-doen {
  background-color: #795BBD;
  border-color: #52309E;
  box-shadow: 0 10px 0 0 #52309E, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-leuke-dingen-doen:hover {
    background-color: #825ED6;
    border-color: #52309E;
    box-shadow: 0 8px 0 0 #52309E, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
  .btn-leuke-dingen-doen.active:focus, .btn-leuke-dingen-doen:active:focus, .btn-leuke-dingen-doen:active, .btn-leuke-dingen-doen:focus {
    background-color: #52309E !important;
    border: 1px solid #52309E;
    box-shadow: 0 6px 0 0 #52309E, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

/**
----------------------- tts button ----------------------- */
.container-tts {
  display: initial; }
  .container-tts .tts-btn {
    display: inline-block;
    position: absolute;
    height: 48px;
    width: 48px;
    background-image: url("../images/btn/tts.svg");
    background-position: center;
    margin-top: -5px;
    margin-left: -60px; }
    .container-tts .tts-btn img {
      height: 48px;
      width: 48px;
      display: none; }
  .container-tts .tts-btn-pause {
    background-image: url("../images/btn/tts_pause.svg"); }
  .container-tts .tts-btn-play {
    background-image: url("../images/btn/tts_play.svg"); }
  .container-tts .tts-btn-loading {
    background-image: url("../images/btn/tts_loading.svg");
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
  .container-tts.tts-btn-white .tts-btn {
    background-image: url("../images/btn/tts_white.svg"); }
  .container-tts.tts-btn-white .tts-btn-pause {
    background-image: url("../images/btn/tts_pause_white.svg"); }
  .container-tts.tts-btn-white .tts-btn-play {
    background-image: url("../images/btn/tts_play_white.svg"); }
  .container-tts.tts-btn-white .tts-btn-loading {
    background-image: url("../images/btn/tts_loading_white.svg"); }

ul.sidebarnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  padding-bottom: 30px;
  /* Change the link color on hover */ }
  ul.sidebarnav li a {
    display: block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 22px;
    letter-spacing: 0.73px;
    line-height: 40px; }
  ul.sidebarnav li a:hover {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff; }
  ul.sidebarnav li.active a {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff; }

.container-wave,
.container-header {
  background-color: #FDEBD7; }

.container-header {
  padding-top: 50px;
  padding-bottom: 40px; }
  .container-header h1 {
    font-family: "Rubik", sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #3B1837;
    font-size: 40px;
    line-height: 60px;
    margin: 0rem;
    text-align: center; }
    @media (min-width: 992px) {
      .container-header h1 {
        text-align: left; } }
  .container-header .tts-btn {
    margin-top: 5px; }
  .container-header .container-header-logo {
    text-align: center;
    padding-bottom: 50px; }
    @media (min-width: 992px) {
      .container-header .container-header-logo {
        padding-bottom: 0px;
        text-align: left; } }
  .container-header .container-header-message {
    padding-left: 50px; }

.container-wave {
  background-image: url("../images/wave_pattern.png");
  background-repeat: repeat-x;
  min-height: 90px; }
  .container-wave img {
    opacity: 0; }

.container-buttons {
  padding-top: 30px; }

.container-item {
  background-color: #FDEBD7;
  height: 100%;
  min-height: 100vh; }
  .container-item .back-btn img {
    height: 60px;
    width: 60px; }
  .container-item .sidebar-row {
    height: 100%;
    min-height: 100vh; }
    @media (min-width: 992px) {
      .container-item .sidebar-row .sticky {
        position: sticky;
        top: 0px; } }
    .container-item .sidebar-row .sidebar-col .btn-container {
      padding: 30px 20px; }
      .container-item .sidebar-row .sidebar-col .btn-container h2 {
        color: #fff;
        padding-top: 30px; }
    .container-item .sidebar-row .sidebar-col .tts {
      text-align: right; }
      .container-item .sidebar-row .sidebar-col .tts .tts-btn {
        position: inherit; }
    .container-item .sidebar-row .content {
      padding: 30px; }
      .container-item .sidebar-row .content .content-container {
        padding: 60px;
        padding-left: 80px;
        border-radius: 12px;
        background-color: #FFFFFF;
        margin-bottom: 40px;
        max-width: 900px; }
      .container-item .sidebar-row .content ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%; }
        .container-item .sidebar-row .content ul li a {
          color: #fff;
          font-size: 24px;
          letter-spacing: 0.8px;
          line-height: 120px;
          padding: 30px;
          border-radius: 12px;
          background-color: #682D61;
          border-color: #452241;
          box-shadow: 0 10px 0 0 #452241, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li a:hover {
            background-color: #822C75;
            border-color: #452241;
            box-shadow: 0 8px 0 0 #452241, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li a.active:focus, .container-item .sidebar-row .content ul li a:active:focus, .container-item .sidebar-row .content ul li a:active, .container-item .sidebar-row .content ul li a:focus {
            background-color: #452241 !important;
            border: 1px solid #452241;
            box-shadow: 0 6px 0 0 #452241, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-thuis-en-familie-wrapper a {
          background-color: #682D61;
          border-color: #452241;
          box-shadow: 0 10px 0 0 #452241, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-thuis-en-familie-wrapper a:hover {
            background-color: #822C75;
            border-color: #452241;
            box-shadow: 0 8px 0 0 #452241, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-thuis-en-familie-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-thuis-en-familie-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-thuis-en-familie-wrapper a:active, .container-item .sidebar-row .content ul li .btn-thuis-en-familie-wrapper a:focus {
            background-color: #452241 !important;
            border: 1px solid #452241;
            box-shadow: 0 6px 0 0 #452241, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-mijn-lichaam-wrapper a {
          background-color: #0F9CB4;
          border-color: #006F98;
          box-shadow: 0 10px 0 0 #006F98, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-mijn-lichaam-wrapper a:hover {
            background-color: #13A8BF;
            border-color: #006F98;
            box-shadow: 0 8px 0 0 #006F98, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-mijn-lichaam-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-mijn-lichaam-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-mijn-lichaam-wrapper a:active, .container-item .sidebar-row .content ul li .btn-mijn-lichaam-wrapper a:focus {
            background-color: #006F98 !important;
            border: 1px solid #006F98;
            box-shadow: 0 6px 0 0 #006F98, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-mijn-gevoel-wrapper a {
          background-color: #EEAC11;
          border-color: #CA7A19;
          box-shadow: 0 10px 0 0 #CA7A19, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-mijn-gevoel-wrapper a:hover {
            background-color: #F7BD0C;
            border-color: #CA7A19;
            box-shadow: 0 8px 0 0 #CA7A19, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-mijn-gevoel-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-mijn-gevoel-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-mijn-gevoel-wrapper a:active, .container-item .sidebar-row .content ul li .btn-mijn-gevoel-wrapper a:focus {
            background-color: #CA7A19 !important;
            border: 1px solid #CA7A19;
            box-shadow: 0 6px 0 0 #CA7A19, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-op-school-wrapper a {
          background-color: #2A8356;
          border-color: #0D5832;
          box-shadow: 0 10px 0 0 #0D5832, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-op-school-wrapper a:hover {
            background-color: #1C9456;
            border-color: #0D5832;
            box-shadow: 0 8px 0 0 #0D5832, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-op-school-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-op-school-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-op-school-wrapper a:active, .container-item .sidebar-row .content ul li .btn-op-school-wrapper a:focus {
            background-color: #0D5832 !important;
            border: 1px solid #0D5832;
            box-shadow: 0 6px 0 0 #0D5832, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-verliefd-en-verkering-wrapper a {
          background-color: #F07684;
          border-color: #E23F3F;
          box-shadow: 0 10px 0 0 #E23F3F, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-verliefd-en-verkering-wrapper a:hover {
            background-color: #FF8593;
            border-color: #E23F3F;
            box-shadow: 0 8px 0 0 #E23F3F, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-verliefd-en-verkering-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-verliefd-en-verkering-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-verliefd-en-verkering-wrapper a:active, .container-item .sidebar-row .content ul li .btn-verliefd-en-verkering-wrapper a:focus {
            background-color: #E23F3F !important;
            border: 1px solid #E23F3F;
            box-shadow: 0 6px 0 0 #E23F3F, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-vrienden-en-vriendinnen-wrapper a {
          background-color: #E62926;
          border-color: #A0201E;
          box-shadow: 0 10px 0 0 #A0201E, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-vrienden-en-vriendinnen-wrapper a:hover {
            background-color: #F72623;
            border-color: #A0201E;
            box-shadow: 0 8px 0 0 #A0201E, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-vrienden-en-vriendinnen-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-vrienden-en-vriendinnen-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-vrienden-en-vriendinnen-wrapper a:active, .container-item .sidebar-row .content ul li .btn-vrienden-en-vriendinnen-wrapper a:focus {
            background-color: #A0201E !important;
            border: 1px solid #A0201E;
            box-shadow: 0 6px 0 0 #A0201E, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-pesten-wrapper a {
          background-color: #665C46;
          border-color: #483C22;
          box-shadow: 0 10px 0 0 #483C22, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-pesten-wrapper a:hover {
            background-color: #786849;
            border-color: #483C22;
            box-shadow: 0 8px 0 0 #483C22, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-pesten-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-pesten-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-pesten-wrapper a:active, .container-item .sidebar-row .content ul li .btn-pesten-wrapper a:focus {
            background-color: #483C22 !important;
            border: 1px solid #483C22;
            box-shadow: 0 6px 0 0 #483C22, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }
        .container-item .sidebar-row .content ul li .btn-leuke-dingen-doen-wrapper a {
          background-color: #795BBD;
          border-color: #52309E;
          box-shadow: 0 10px 0 0 #52309E, 0 18px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-leuke-dingen-doen-wrapper a:hover {
            background-color: #825ED6;
            border-color: #52309E;
            box-shadow: 0 8px 0 0 #52309E, 0 14px 0 0 rgba(107, 87, 65, 0.15); }
          .container-item .sidebar-row .content ul li .btn-leuke-dingen-doen-wrapper a.active:focus, .container-item .sidebar-row .content ul li .btn-leuke-dingen-doen-wrapper a:active:focus, .container-item .sidebar-row .content ul li .btn-leuke-dingen-doen-wrapper a:active, .container-item .sidebar-row .content ul li .btn-leuke-dingen-doen-wrapper a:focus {
            background-color: #52309E !important;
            border: 1px solid #52309E;
            box-shadow: 0 6px 0 0 #52309E, 0 10px 0 0 rgba(107, 87, 65, 0.15) !important; }

.container-thuis-en-familie .sidebar {
  background-color: #682D61; }

.container-mijn-lichaam .sidebar {
  background-color: #0F9CB4; }

.container-mijn-gevoel .sidebar {
  background-color: #EEAC11; }

.container-op-school .sidebar {
  background-color: #2A8356; }

.container-verliefd-en-verkering .sidebar {
  background-color: #F07684; }

.container-vrienden-en-vriendinnen .sidebar {
  background-color: #E62926; }

.container-pesten .sidebar {
  background-color: #665C46; }

.container-leuke-dingen-doen .sidebar {
  background-color: #795BBD; }