.elementor-13469 .elementor-element.elementor-element-0c46a4e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13469 .elementor-element.elementor-element-4b001e7{text-align:center;}.elementor-13469 .elementor-element.elementor-element-4b001e7 .elementor-heading-title{font-family:"Arial", Sans-serif;font-size:3.9em;color:#222222;}.elementor-13469 .elementor-element.elementor-element-89f6e75{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-13469 .elementor-element.elementor-element-689b6b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-13469 .elementor-element.elementor-element-4b001e7 > .elementor-widget-container{margin:40px 0px 0px 0px;}}@media(max-width:767px){.elementor-13469 .elementor-element.elementor-element-0c46a4e{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-13469 .elementor-element.elementor-element-4b001e7 > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-bd197f6 *//* =========================================
   FINAL IVI
========================================= */

.rtd-final-ivi{
  display:flex;
  align-items:flex-end;
  gap:18px;

  margin-top:20px;
}

.rtd-final-ivi__image{
  width:90px;
  flex-shrink:0;
}

.rtd-final-ivi__bubble{
  position:relative;

  background:#c4a8cc;
  color:#fff;

  padding:18px 22px;

  border-radius:18px;

  font-size:20px;
  line-height:1.6;
  font-weight:700;

  text-align:left;
}

.rtd-final-ivi__bubble::before{
  content:"";

  position:absolute;

  left:-12px;
  bottom:20px;

  border-width:10px;
  border-style:solid;

  border-color:
    transparent #c4a8cc transparent transparent;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9547829 */.repro-activity{
max-width:900px;
margin:auto;
font-family: 'Comic Sans MS', cursive;
text-align:center;
}

.diagram{
position:relative;
margin:30px auto;
}

.base-image{
width:100%;
max-width:500px;
}

.dropzone{
position:absolute;
width:120px;
height:40px;
border:2px dashed #bbb;
border-radius:6px;
background:#ffffffaa;
}

.labels{
margin-top:30px;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

.drag{
padding:10px 15px;
background:#b66da4;
color:white;
border-radius:6px;
cursor:grab;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-660c4ef */.periodcheck-app{
  width:100%;
  position:relative;

  font-family:Arial,sans-serif;

  color:#000;
}

/* =========================================
   SCREEN
========================================= */

.periodcheck-app .pc-screen{
  display:none;
}

.periodcheck-app .pc-screen.is-active{
  display:block;

  animation:pcFade .35s ease;
}

@keyframes pcFade{

  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:none;
  }

}

/* =========================================
   IVI
========================================= */

.periodcheck-app .pc-ivi-wrap{
  max-width:1200px;

  margin:0 auto;

  padding:40px 20px 120px;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  gap:36px;
}

.periodcheck-app .pc-ivi{
  width:220px;

  flex-shrink:0;
}

/* =========================================
   BUBBLE
========================================= */

.periodcheck-app .pc-bubble{
  position:relative;

  background:#c4a8cc;
  color:#222;

  border-radius:30px;

  padding:34px;

  max-width:760px;

  font-size:22px;
  line-height:1.8;

  box-shadow:
    0 18px 45px rgba(0,0,0,.08);
}

.periodcheck-app .pc-bubble::before{
  content:"";

  position:absolute;

  left:-18px;
  top:80px;

  border-width:12px;
  border-style:solid;

  border-color:
    transparent #c4a8cc transparent transparent;
}

/* =========================================
   BUTTON
========================================= */

.periodcheck-app .pc-btn{
  border:none;

  background:#c4a8cc;
  color:#222;

  padding:18px 34px;

  border-radius:18px;

  font-size:20px;
  font-weight:700;

  cursor:pointer;

  transition:.25s ease;
}

.periodcheck-app .pc-btn:hover{
  transform:translateY(-3px);
}

.periodcheck-app .pc-btn--fixed{
  position:fixed;

  right:30px;
  bottom:30px;

  z-index:100;
}
.period-activity-hidden{
  display:none;
}
/* =========================================
   QUIZ
========================================= */

.periodcheck-app .pc-top{
  max-width:1400px;

  margin:0 auto;

  padding:30px 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.periodcheck-app .pc-title{
  margin:0;

  font-size:42px;
  line-height:1.3;
}

.periodcheck-app .pc-progress{
  display:flex;
  align-items:center;

  gap:12px;

  background:#fff;

  padding:18px 24px;

  border-radius:20px;

  box-shadow:
    0 12px 30px rgba(0,0,0,.08);
}

.periodcheck-app .pc-progress strong{
  color:#c4a8cc;

  font-size:28px;
}

/* =========================================
   OPTIONS
========================================= */

.periodcheck-app .pc-options{
  max-width:1400px;

  margin:0 auto;

  padding:20px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:28px;
}

/* =========================================
   CARD
========================================= */

.periodcheck-app .pc-option{
  border:none;

  background:#fff;

  border-radius:30px;

  overflow:hidden;

  cursor:pointer;

  transition:.25s ease;

  border:3px solid #eee;

  box-shadow:
    0 12px 30px rgba(0,0,0,.06);
}

.periodcheck-app .pc-option:hover{
  transform:translateY(-5px);
}

.periodcheck-app .pc-option img{
  width:100%;

  aspect-ratio:1;

  object-fit:contain;

  background:#fff;
}

.periodcheck-app .pc-option__title{
  padding:22px;

  text-align:center;

  font-size:24px;
  line-height:1.5;
  font-weight:700;
}

.periodcheck-app .pc-option.is-correct{
  border-color:#8acb91;
}

.periodcheck-app .pc-option.is-wrong{
  border-color:#efaaaa;
}

/* =========================================
   FEEDBACK
========================================= */

.periodcheck-app .pc-feedback{
  position:fixed;

  inset:0;

  background:rgba(0,0,0,.35);

  z-index:999;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  gap:20px;

  padding:20px;
}

.periodcheck-app .pc-feedback.hidden{
  display:none;
}

.periodcheck-app .pc-feedback__ivi{
  width:220px;
}

.periodcheck-app .pc-feedback__bubble{
  background:#fff;

  border-radius:24px;

  padding:24px 32px;

  max-width:700px;

  text-align:center;

  font-size:28px;
  line-height:1.5;
  font-weight:700;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

  .periodcheck-app .pc-options{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:900px){

  .periodcheck-app .pc-ivi-wrap{
    flex-direction:column;
    align-items:center;
  }

}

@media(max-width:768px){

  .periodcheck-app .pc-title{
    font-size:34px;
  }

  .periodcheck-app .pc-bubble{
    font-size:18px;
  }

  .periodcheck-app .pc-options{
    grid-template-columns:1fr;
  }

  .periodcheck-app .pc-option__title{
    font-size:22px;
  }

  .periodcheck-app .pc-btn--fixed{
    position:relative;

    right:auto;
    bottom:auto;

    margin:30px auto 0;

    display:block;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6d6e491 */.repro-activity{
max-width:900px;
margin:auto;
font-family: 'Comic Sans MS', cursive;
text-align:center;
}

.diagram{
position:relative;
margin:30px auto;
}

.base-image{
width:100%;
max-width:500px;
}

.dropzone{
position:absolute;
width:120px;
height:40px;
border:2px dashed #bbb;
border-radius:6px;
background:#ffffffaa;
}

.labels{
margin-top:30px;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

.drag{
padding:10px 15px;
background:#b66da4;
color:white;
border-radius:6px;
cursor:grab;
}/* End custom CSS */