/***** CSS DISEÑO LICEO DIGITAL *****/

 /** FUENTES **/
 @font-face {
    font-family: BebasNeue;
    src: url(http://aulasvirtuales.cmm.uchile.cl/fonts/BebasNeue/BebasNeue\ Regular.ttf);
}

@font-face {
    font-family: BebasNeueLight;
    src: url(http://aulasvirtuales.cmm.uchile.cl/fonts/BebasNeue/BebasNeue\ Light.ttf);
}

@font-face {
    font-family: BebasNeueBook;
    src: url(http://aulasvirtuales.cmm.uchile.cl/fonts/BebasNeue/BebasNeue\ Book.ttf);
}

@font-face {
    font-family: Alittlesunshine;
    src: url(http://aulasvirtuales.cmm.uchile.cl/fonts/Alittlesunshine/A\ little\ sunshine.ttf);
}

/** GENERAL **/
body{
    font-family: Arial;
    color:#343434;
}

body p{
    text-align: justify;
    font-size: 16px;
}

.box{
    max-width:100%;
}

.titulo1 {
    font-family: "BebasNeue";
    font-size: 32px;
}

.titulo1:before {
    content:"• ";
}

.titulo2{
    font-size: 32px;
}
.titulo2 .parte1{
    font-family: "BebasNeueBook";
}

.titulo2 .parte2{
    font-family: "Alittlesunshine";
}

.titulo2 .parte2:before {
    content: '';
   display: inline-block;
   height: 7px;
  width: 7px;
  vertical-align:middle;
  margin:5px;
  margin-top:0px;
  background-color: #000;
  border-radius: 50%;
}

/** PREGUNTAS **/

.pregunta{
    position: relative;
    margin-bottom:10px;
}

.pregunta .num{
    width: 50px;
    height: 100%;
    border-radius: 14px 0px 0px 14px;
    top: 0px;
    left: 0px;
    position: absolute;
}

.pregunta .num span {
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-family: "BebasNeue";
    font-size: 28px;
    line-height: 52px;
    font-weight: bolder;
    background: #19d0cb;
    background: -prefix-linear-gradient(left top, #19d0cb, #eff6fe);
    background: linear-gradient(to bottom right, #19d0cb, #eff6fe);
    text-align: center;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -24px;
}

.pregunta .enunciado{
    margin-left: 45px;
    line-height: 25px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    border: 3px solid #06d0c4;
    border-top-right-radius: 34px;
    border-bottom-right-radius: 34px;
    border-left: none;
    width:fit-content;
}

.pregunta .enunciado .texto{
    margin-left: 25px;
    margin-right: 45px;
}

/** MENSAJES **/
.mensaje{
    position: relative;
    margin-bottom:10px;
    margin-top:75px;
}

.mensaje .num{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -65px;
    /* border-radius: 50%; */
    width: 150px;
    height: 130px;
    padding: 8px;
    font-family: "Alittlesunshine";
    font-size:25px;
    line-height: 36px;
    background: #19d0cb;
    background: -prefix-linear-gradient(left top, #faf205, #f8e88f);
    background: linear-gradient(to bottom right, #faf205, #f8e88f);
    text-align: center;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    display:inline-block;
}

.mensaje .num img{
    width:50%;
}

.mensaje .num .nommsj{
    text-align:center;
    margin-top:5px;
    line-height: 24px;
    font-size: 20px;
}

.mensaje .enunciado{
    margin-left: 160px;
    line-height: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
    border: 3px dashed #d2d2d2;
    border-top-right-radius: 34px;
    border-bottom-right-radius: 34px;
    border-left: none;
    width:fit-content;
}

.mensaje .enunciado .texto{
    margin-left: 25px;
    margin-right: 45px;
    margin-left: 25px;
    margin-right: 45px;
    border-left: 4px solid #06d0c4;
    padding: 25px 0px 25px 15px;
}

/** DIALOGOS **/

.dialogo{
    position: relative;
    color: #000;
    min-height: 150px;
    padding: 20px 0;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.dialogo .personaje{
    position: absolute;
    height: 130px;
}

.dialogo.Izquierda .personaje{
    left: 10px;
}

.dialogo.Derecha .personaje{
    right: 10px;
}

.dialogo .personaje img{
    max-height: 100%;
}

.dialogo .textodialogo{
    position: relative;
    /*width: 650px;*/
    box-sizing: border-box;
    padding: 30px;
    padding-top:10px;
    padding-bottom:10px;
    border-radius: 20px;
    min-height: 78px;
    display: table-cell;
    vertical-align: middle;
    width:auto;
    max-width:calc(100% - 140px);
}

.dialogo.Izquierda .textodialogo{
    left: 140px;
    background-color: #e9e9e9;
    float: left;
}

.dialogo.Derecha .textodialogo{
    float: right;
    right: 140px;
    background-color: #5cdfd7;
}

/** CAPSULAS **/

.capsula{
    padding:50px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    margin-top:75px;
    margin-bottom:35px;
    margin-left: 50px;
}

.capsula.borde{
    border: 3px solid #06d0c4;
}

.capsula.radioborde{
    border-radius: 20px;
}

.capsula.confondo{
    background-color: #e3f9f8;
}

.captop{
    font-size: 25px;
    position: absolute;
    top: -50px;
    left: -50px;
    padding: 25px;
    font-family: 'Alittlesunshine';
}

.captop.azul{
    background: #19d0cb;
    background: -prefix-linear-gradient(left top, #07d0c5, #abd1fc);
    background: linear-gradient(to bottom right, #07d0c5, #abd1fc);
}

.captop.amarillo{
    background: #faf105;
    background: -prefix-linear-gradient(left top, #faf105, #f8e88f);
    background: linear-gradient(to bottom right, #faf105, #f8e88f);
}

.captop.transp{
    padding:10px;
}

.captop .icono{
    position: absolute;
    width: 50px;
    top: 10px;
    left: 10px;
}

.captop.transp .icono{
    position: absolute;
    width: 25px;
    top: 10px;
    left: 25px;
}

.captop span.capnombre{
    margin-left:50px;
}

.capsula img{
    max-width:100%;
}

.videoborde{
        min-width: 250px;
        min-height: 250px;
        padding: 20px;
        display: inline-block;
    border-style: solid;
  border-width: 3px; 
  border-image-source: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox=%220 0 80 80%22%3E%3Crect x=%224%22 y=%224%22 width=%2272%22 height=%2272%22 fill=%22transparent%22 stroke=%22%23000%22 stroke-width=%223%22 %2F%3E%3C%2Fsvg%3E");

  border-image-slice: 75%; 

  border-image-width: 64px;
}

.videoborde iframe{
    padding:10px;
    border:3px solid black;
    max-width:100%;
}

/* TABLAS */
  
.tabla{
    border-spacing: 0px;
    border: 2px solid #059990;
    border-radius: 15px;
    /*border-top: 1px;*/
    margin-top:15px;
    max-width:100%;
}

.tabla.tablagrande{
    width:800px;
}

.tabla.tablamediana{
  width:600px;
}

.tabla.tablachica{
    width:400px;
  }

  .tabla.tablamuychica{
    width:300px;
  }


.tabla [class^=dtcell].w400{
  width:400px;
 }

 .tabla [class^=dtcell].w266{
  width:266px;
 }

.tabla [class^=dtcell].w300{
width:300px;
}

.tabla [class^=dtcell].w250{
  width:200px;
 }

.tabla [class^=dtcell].w200{
width:200px;
}

.tabla [class^=dtcell].w150{
    width:150px;
   }
  

.tabla [class^=dtcell].w100{
  width:100px;
 }

 .tabla [class^=dtcell].w50{
  width:50px;
 }

 .tabla .dtrowh .dtcell2{
    text-align:center!important;
    background-color: #F0F0F1;
    color: #464646;
    font-weight: 600;
}

 .tabla .dtrowh .dtcell3{
    text-align:center!important;
    background-color: #F0F0F1;
    color: #464646;
    font-weight: 600;
}
 .tabla .dtrowh .dtcell1{
    text-align:center!important;
    background-color: #F0F0F1;
    color: #464646;
    font-weight: 600;
}

 .tabla .dtcell3{
    border-right: 1px solid #707070;
    border-top: 1px solid #707070;
}
 .tabla .dtcell1{
    border-right: 1px solid #707070;
    border-top: 1px solid #707070;
}

 .tabla .dtcell2{
    border-top: 1px solid #707070;
}

.tabla [class^=dtcell].celeste{
  background-color:#e4fffd;
}

 .tabla [class^=dtrow]:first-child [class^=dtcell]{border-top:none;}

 .tabla [class^=dtrow]:first-child [class^=dtcell1]:first-child{border-radius: 15px 0 0 0;}
 .tabla [class^=dtrow]:first-child [class^=dtcell2]:last-child{border-radius: 0 15px 0 0;}
 .tabla [class^=dtrow]:last-child [class^=dtcell1]:first-child{border-radius: 0 0 0 15px;}
 .tabla [class^=dtrow]:last-child [class^=dtcell2]:last-child{border-radius: 0 0 15px 0;}
 .tabla [class^=dtrow]:only-child [class^=dtcell1]:first-child{border-radius: 15px 0 0 15px;}
 .tabla [class^=dtrow]:only-child [class^=dtcell2]:last-child{border-radius: 0 15px 15px 0;}

 .tabla .dtrow [class^=dtcell]{
    padding: 0px 25px;
}
 .tabla .dtrow.first [class^=dtcell]{
    padding: 10px 25px; 
}

  .tabla [class^=dtrow]{display: table-row;color:#727277; }
  .tabla [class^=dtcell]{display: table-cell;text-align: left;vertical-align: middle;background-color: #fff;box-sizing: border-box;padding: 10px 25px;position: relative;}
  .tabla .dtrowh [class^=dtcell]{padding: 10px 25px; }
.tabla .inputtype.option-input { margin:none!important; }

.tabla.menospadding [class^=dtcell]{padding: 10px 5px; }

.tabla .field{
    float:left;
  width:62px;
  margin-left: 70px;
  font-size: 0px;
}

.tabla .field label{
  border:0px!important;
}

.tabla .chb .field:nth-child(3){
  display:none;
  width:0px;
  margin-left:0px;
}

.tabla center{
  padding:0px!important;
}

/** CUESTIONARIO **/
#page-mod-quiz-view .quizinfo{
    display:none;
}

.que h3.no {
    display:none;
}

.que .formulation {
    color:#343434;
    background-color: transparent;
    border-color: transparent;
}

.que .outcome, .que .comment {
    color: #343434;
    background-color: transparent;
    border-color: transparent;
}

/** H5P **/

button.h5p-question-check-answer {
    background-color: #059990;
}

/** RESPONSIVIDAD **/

@media only screen and (max-width: 768px) {
    .dialogo .textodialogo{
        width:auto;
        max-width:calc(100% - 140px);
    }
  }


/** TOGGLE MOSTRAR ESCONDER PISTA O CUALQUIER COSA **/

/**
 * Notice: Checkbox is styled via import of my other pen (https://codepen.io/fxm90/pen/JdmaeL)
 */

.eltoggle input[type="checkbox"] + span {
        display:none;
        visibility: hidden;
        opacity: 0;
      
        transition: visibility 0s linear 0.33s, opacity 0.33s linear;
      }
      
.eltoggle input[type="checkbox"]:checked + span {
        display:block;
        visibility: visible;
        opacity: 1;
        
        transition-delay: 0s;
      }

  .msgoculto {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    font-weight: 400;
    border: 1px solid #ddd;
    border-radius: 3px;
  }

  .chbceleste {
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    display:none;
  }

  .chbceleste:checked:before {
    border-color: #03a9f4;
  }

  .chbceleste:checked:before {
    height: 50%;
    transform: rotate(-45deg);
    border-top-style: none;
    border-right-style: none;
  }

  .chbceleste:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 2px solid #f2f2f2;
    transition: all 0.3s ease-in-out;
}

/*** MODALS ***/

/* Greeting Modal Container */
.modal-container {
    visibility: hidden;
    opacity: 0;
    transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  /* Greeting Modal Container - when open */
  .modal-container:target {
    visibility: visible;
    opacity: 1;
  }
  
  /* Greeting Modal */
  .modal-container .mymodal {
    opacity: 0;
    transform: translateY(-1rem);
    transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: .2s;
  }
  
  /* Greeting Modal - when open */
  .modal-container:target .mymodal {
  transform: translateY(0);
  opacity: 1;
  }
  
  /* Modal Container Styles */
  .modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1;
  }
  
  /* Modal Background Styles */
  .modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .2);
  }
  
  /* Modal Body Styles */
  .mymodal {
    z-index: 1;
    background-color: white;
    width: fit-content;
    max-width: 1000px;
    padding: 1rem;
    border-radius: 8px;
    overflow:scroll;
    max-height:450px;
  }

  /** botón estiloso **/
  a.btnmodal {
    background-color: #e4fffd;;
    color:#707070;
    padding: 12px 13px;
    text-decoration: none;
    border-radius: 20px;
  }
  
  a.btnmodal:hover {
    background-color: #a0f2ec;
  }

  a.btnmodal:target::before {
      content:none;
  }

  /** PERSISTENTE **/
  .pestanapersistente {
    display: flex;
  }
  
  .pestanapersistente .alert {
    position: relative;
    font-style: italic;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    margin-bottom: 1em;
  }
  
  .pestanapersistente .alert-info {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f !important;
  }
  
  .pestanapersistente .btn-fixed {
    position: fixed;
    right: 2em;
    top: 50vh;
  }
  
  .pestanapersistente .persistent-btn {
        display: flex;
        padding: 8px 16px;
        border-radius: 3px;
        cursor: pointer;
        text-decoration: none !important;
        font-family: 'Alittlesunshine';
        font-size: 16px;
        font-weight: bold;
        color: #fff !important;
        background: #059990;
        opacity: 0.8;
        transition: 1s;
        box-shadow: 8px 8px 0 #abd1fc;
        transform: skewX(-15deg);
        z-index: 999;
  }
  
  
  
  .pestanapersistente .persistent-btn:hover {
      transition: 0.5s;
      opacity: 1;
      box-shadow: 5px 5px 0 #05706b;
  }
  
  
  .pestanapersistente .persistent-btn span {
      transform: skewX(15deg);
      text-transform: uppercase;
    }
  
    .pestanapersistente .animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
  
    .pestanapersistente .animated{
      -webkit-animation-duration:1s;
      animation-duration:1s;
      -webkit-animation-fill-mode:both;
      animation-fill-mode:both
  }
  
  @-webkit-keyframes fadeInRight{
      0%{
          opacity:0;
          -webkit-transform:translateX(200px);
          transform:translateX(200px)
      }
      100%{
          opacity:1;
          -webkit-transform:translateX(0);
          transform:translateX(0)
      }
  }
  @keyframes fadeInRight{
      0%{
          opacity:0;
          -webkit-transform:translateX(200px);
          -ms-transform:translateX(200px);
          transform:translateX(200px)
      }
      100%{
          opacity:1;
          -webkit-transform:translateX(0);
          -ms-transform:translateX(0);
          transform:translateX(0)
      }
  }
  .fadeInRight{
      -webkit-animation-name:fadeInRight;
      animation-name:fadeInRight
  }

/** SLIDER **/
.slider {
    width: 800px;
    max-width:100%;
    position: relative;
    margin: 30px auto;
  }
  
  .slider>.contenido {
    position: relative;
    width:90%;
    transition: all 0.2s;
    min-height: 360px;
  }
  
  .slider>.contenido img{
    max-width:100%;
  }
  
  .slider input[name^='slide_switch'] {
    display: none;
  }
  
  .slider label {
    margin: 5px 0 0 0px;
    border: 3px solid #39958f;
    position:absolute;
    left:93%;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.6;
    background-color: #e4fffd;
    color: #343434;
    padding: 5px;
  }
  
  .slider label:nth-child(2){
    top:0;
  }
  
  .slider label:nth-child(5){
    top:15%;
  }
  
  .slider label:nth-child(8){
    top:30%;
  }
  
  .slider label:nth-child(11){
    top:45%;
  }
  
  .slider label:nth-child(14){
    top:60%;
  }
  
  .slider label:nth-child(17){
    top:75%;
  }
  
  .slider label:nth-child(20){
    top:90%;
  }
  
  .slider label img {
    display: block;
  }
  
  .slider input[name^='slide_switch']:checked+label {
    border-color:#39958f;
    opacity: 1;
  }
  
  .slider input[name^='slide_switch']~.contenido {
    opacity: 0;
    display:none;
    transform: scale(1.1);
  }
  
  .slider input[name^='slide_switch']:checked+label+.contenido {
    opacity: 1;
    display:block;
    transform: scale(1);
  }

/** QUE APRENDIMOS **/

.queaprendimos{
    margin-top:30px;
}

.queaprendimos p,.queaprendimos select{
    display:inline;
}

.queaprendimos div[class^='preg']{
    background-size:contain;
    width: 20px;
    height: 15px;
    display: inline-block;
}

.queaprendimos div[class^='preg'].correcta{
    background-image:url(https://static.sumaysigue.uchile.cl/LiceoDigital/img/correcto.png);
    background-size:contain;
    background-repeat: no-repeat;
}

.queaprendimos div[class^='preg'].incorrecta{
    background-image:url(https://static.sumaysigue.uchile.cl/LiceoDigital/img/incorrecto.png);
    background-size:contain;
    background-repeat: no-repeat;
}
 
/* EXTRAS VARIOS */

.textorojo{
    color:red;
}

 /* AGREGADO THOMAS */
  
 .numeroPagina {
    font-family: arial;
    display: inline-block;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
    width: 133px;
    height: 47px;
    background-image: url(https://static.cmm.uchile.cl/global2/numpag.png);
    background-repeat: no-repeat;
    text-align: center;
    line-height: 50px;
}
/*
.logo {
    float: right;
    display: inline-block;
    width: 102px;
    height: 71px;
    background-image: url(https://static.cmm.uchile.cl/global/logo.jpg);
    background-repeat: no-repeat;
}
*/

.nombreActividad {
        font-family: arial;
    font-size: 15px;
    color: #919191;
    margin-top: 1.2%;
    text-transform: uppercase;
}

.box{

    width:950px;
    margin: 0 auto;
}

.preguntas {
    position: relative;
    width: 780px;
    border-radius: 10px;
    background-color: #f1f2f4;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    margin: 20px 0;
    font-family: Arial;
    margin:0 auto;
    margin-bottom: 2% ;
    border: 1px solid #9c9c9c;
}

.preguntas .numero {
    width: 25px;
    height: 25px;
    background-color: #dc0000;
    color: #fff;
    margin: auto;
    border-radius: 20px;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    top: 18px;
    left: 10px;
    line-height: 25px;
}

.preguntas .separpreg {
    width: 1px;
    height: 40px;
    background-color: #a7a7a7;
    color: #fff;
    margin: auto 10px;
    position: relative;
    left: 25px;
    float: left;
}

.preguntas .enunciado {
    width: 720px;
    color: #464646;
    font-weight: bold;
    position: relative;
    left: 25px;
    float: left;
}

.letra{
    display: inline-block;
    vertical-align: top;
    margin-right: 9px;
}


/*
.singlebutton:nth-child(2), .singlebutton:last-child {
  float:right;
}

.singlebutton:last-child button::after {
  content: " >";
}

.singlebutton:first-child button::before{
  content: "< ";
}

.singlebutton:only-child button::before{
    content:"";
}
.singlebutton button{
  background-color:#DC0000;
  color:white;
  border-radius:15px;
  border:0;
  transition: box-shadow .3s;
  font-weight: bold;
  }

.singlebutton button:hover, .singlebutton button:active{
    background-color:#DC0000;
  color:white;
  border-radius:15px;
  border:0;
   box-shadow: 5px 5px 7px rgba(33,33,33,.3); 
   transform: translateY(4px);
}
*/

/***** ESTO ES LO DE SUMA Y SIGUE QUE USAMOS PARA PROBAR, SUPONGO QUE HAY QUE SACARLO *****/


/* CAPSULAS */


:root {
    --max-width: 800px;
  }
  
  /* Exploremos */
  .eolcontainer_block{
      margin: 30px auto;
      position:relative;width:var(--max-width);
  }
  .eolcontainer_block .Exploremos{
      min-height: 1px;
      margin-bottom: 70px;
  }
  .eolcontainer_block .Exploremos .exptop{
      position:absolute;
      top:0px;
      width: var(--max-width);
      background-repeat: no-repeat; 
      height: 38px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/exploremos-top.png);
      background-color: #f5fbfd;
  }
  .eolcontainer_block .Exploremos .expmid{
      position:relative;
      top:36px;
      width: var(--max-width);
      box-sizing:border-box;
      border:1px solid #0096dc;
      border-top: none;
      overflow: hidden;
      background-color: #f5fbfd;
      text-align: justify;
      padding: 20px;
      line-height: 24px;
  }
  .eolcontainer_block .Exploremos .expbot{
      position:absolute;
      bottom:-48px;
      width: var(--max-width);
      height: 37px;
      background-repeat: no-repeat; 
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/exploremos-bot2.png);
      cursor: pointer;
  }
  
  [id^=Exploremos] .expbot.toggle {
      background-image:url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/exploremos-bot1.png);
  }
  
  
  /* Contenido */
  .eolcontainer_block .Contenido {
      position: relative; 
      background-color:#f6fcf3; 
      border-radius: 10px; 
      padding:20px; 
      box-sizing: border-box; 
      margin: 10px 0;
      border:1px solid #5fa732;
      width: 780px;
  }
  .eolcontainer_block .Contenido .exptop{ 
      position:absolute; 
      top: -15px; 
      right: -19px; 
      background-image:url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/observacion.png); 
      background-repeat: no-repeat;
      width:52px;
      height: 52px;
  }
  .eolcontainer_block .Contenido .expmid {
      margin-top: 10px;
      color: #000;
      text-align: justify;
  }
  
  /* Problema */
  .eolcontainer_block .Problema {
      position: relative; 
      background-color:#eaf7fd; 
      border-radius: 10px; 
      padding:20px; 
      box-sizing: border-box; 
      margin: 10px 0;
      border:1px solid #009cde;
      width: 780px;
  }
  .eolcontainer_block .Problema .exptop{ 
      position:absolute; 
      top: -15px; 
      right: -19px; 
      background-image:url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/problema.png); 
      background-repeat: no-repeat;
      width:52px;
      height: 52px;
  }
  .eolcontainer_block .Problema .expmid {
      margin-top: 10px;
      color: #000;
      text-align: justify;
  }
  
  /* Instruccion */
  
  .eolcontainer_block .Instruccion {
      position: relative; 
      background-color:#fff3bb; 
      border-radius: 10px; 
      padding:20px; 
      box-sizing: border-box; 
      margin: 10px 0;
      border:1px solid #ffd200;
      width: 780px;
  }
  .eolcontainer_block .Instruccion .exptop { 
      position:absolute; 
      top: -15px; 
      right: -19px; 
      background-image:url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/instruccion.png); 
      background-repeat: no-repeat;
      width:52px;
      height: 52px;
  }
  .eolcontainer_block .Instruccion .expmid {
      margin-top: 10px;
      color: #000;
      text-align: justify;
  }
  
  /* Observacion */
  .eolcontainer_block .Observacion {
      background-color: #fac4bd;
      border: 1px solid #ff8783;
      border-radius: 10px;
      box-sizing: border-box;
      margin: 5px 0;
      padding: 20px;
      position: relative;
      width: 780px;
  }
  .eolcontainer_block .Observacion .exptop {
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/recomendacion.png);
      background-repeat: no-repeat;
      height: 52px;
      position: absolute;
      right: -19px;
      top: -15px;
      width: 52px;
  }
  .eolcontainer_block .Observacion .expmid {
      color: #000;
      margin-top: 10px;
      text-align: justify;
  }
  
  /* Respuesta */
  .eolcontainer_block .Respuesta {
      margin-bottom:90px;
      margin-top:30px;
      min-height: 1px;
  }
  .eolcontainer_block .Respuesta .exptop {
      position:absolute;
      top:0px;
      width: var(--max-width);
      background-repeat: no-repeat; 
      height: 38px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/respuesta-top.png);
      background-color: #ffffff;
  }
  .eolcontainer_block .Respuesta .expmid {
      position:relative;
      top:36px;
      width: var(--max-width);
      box-sizing:border-box;
      border:1px solid #7800dc;
      border-top: none;
      overflow: hidden;
      background-color: #ffffff;
      text-align: justify;
      padding: 20px;
      line-height: 24px;
      display: block!important;
  }
  .eolcontainer_block .Respuesta .expbot {
      display:none;
      position:absolute;
      bottom:-48px;
      width: var(--max-width);
      height: 37px;
      background-repeat: no-repeat; 
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/respuesta-bot1.png);
      cursor: pointer;
  }
  
  [id^=Respuesta] .expbot.toggle
  {
      background-image:url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/respuesta-bot2.png);
  }
  
  /***********************/
  /*** Capsulas Media ***/
  /**********************/
  
  /* Exploremos Media */
  
  .eolcontainer_block .Exploremos-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  .eolcontainer_block .Exploremos-Media .exptop{
      position:absolute;
      top:0px;
      width: var(--max-width);
      background-repeat: no-repeat; 
      height: 49px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/expmedia-top.png);
      background-size: cover;
      z-index: 100;
  }
  .eolcontainer_block .Exploremos-Media .expmid{
      position: relative;
      top: 20px;
      width: calc(var(--max-width) - 15px);
      box-sizing: border-box;
      border: 1px solid #addef4;
      border-radius: 25px;
      overflow: hidden;
      /*background-color: #f5fbfd;*/
      text-align: justify;
      padding: 16px;
      padding-bottom: 30px;
      padding-top: 40px;
      line-height: 24px;
      z-index: 90;
  }
  .eolcontainer_block .Exploremos-Media .expbot{
      position: absolute;
      bottom: -45px;
      width: calc(var(--max-width) - 15px);
      height: 64px;
      background-repeat: no-repeat;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/expmedia-botblanco.png);
      background-size: cover;
      cursor: pointer;
      z-index: 100;
  }
  
  .eolcontainer_block .Exploremos-Media .expbot.toggle.cerrado{
      position: relative;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/expmedia-bot-sinflecha.png)!important;
      background-size: contain;
      background-repeat: no-repeat;
      z-index:80;
  }
  
  /* Caso Media */
  
  .eolcontainer_block .Caso-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Caso-Media .exptop { 
      position: absolute;
      left: -50px;
      width: calc(var(--max-width) + 35px);
      background-repeat: no-repeat;
      height: 50px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/iniciocaso.png);
      background-size: contain;
  }
  
  .eolcontainer_block .Caso-Media .expmid {
      position: relative;
      top: 70px;
      width: calc(var(--max-width) - 15px);
      box-sizing: border-box;
      border-left: 10px solid #9572b9;
      border-right: 10px solid #f3f6f6;
      overflow: hidden;
      text-align: justify;
      padding: 20px;
      padding-top: 0px;
      line-height: 24px;
  }
  
  .eolcontainer_block .Caso-Media .expmid p {
      margin-top: 0px;
  }
  
  .eolcontainer_block .Caso-Media .expbot {
      position: relative;
      bottom: -76px;
      width: calc(var(--max-width) - 14px);
      height: 58px;
      margin-top: 10px;
      background-repeat: no-repeat;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/fincaso.png);
      background-size: contain;
  }
  
  p.case-title {
      padding-left: 60px;
      color: white!important;
      margin-top: 4px!important;
      font-size: 24px!important;
  }
  
  /* Problema Media */
  
  .eolcontainer_block .Problema-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Problema-Media .exptop { 
      position: absolute;
      top: 0px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 50px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/probmedia-top.png);
      background-size: cover;
      z-index:100;
  }
  .eolcontainer_block .Problema-Media .expmid{
      position: relative;
      top: 10px;
      height: 100%;
      width: calc(var(--max-width) - 14px);
      box-sizing: border-box;
      border: 1px solid #6FABC6;
      overflow: hidden;
      /*background-color: #BBE8FC;*/
      text-align: justify;
      padding: 20px;
      padding-top: 58px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
      border-radius: 25px;
      z-index: 90;
  }
  
  /* Observacion Media */
  
  .eolcontainer_block .Observacion-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Observacion-Media .exptop {
      position: absolute;
      top: 0px;
      left: -3px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 52px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/obsmedia-top.png);
      background-size: cover;
      z-index: 1;
  }
  
  .eolcontainer_block .Observacion-Media .expmid{
      position: relative;
      top: 49px;
      width: calc(var(--max-width) - 17px);
      box-sizing: border-box;
      border: 1px solid #FF7BB2;
      border-top: none;
      overflow: hidden;
      /*background-color: #FFEFF4;*/
      text-align: justify;
      padding: 20px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
  }
  
  /* Instruccion Media */
  
  .eolcontainer_block .Instruccion-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Instruccion-Media .exptop { 
      position: absolute;
      top: 0px;
      left: -2px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 50px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/instmedia-top.png);
      background-size: cover;
  }
  .eolcontainer_block .Instruccion-Media .expmid{
      position: relative;
      top: 49px;
      width: calc(var(--max-width) - 16px);
      box-sizing: border-box;
      border: 1px solid #FFD100;
      border-top: none;
      overflow: hidden;
      /*background-color: #FDE574;*/
      text-align: justify;
      padding: 20px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
  }
  
  /* Objetivos Media */
  
  .eolcontainer_block .Objetivos-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Objetivos-Media .exptop {
      position: absolute;
      top: 0px;
      left: -2px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 50px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/objmedia-top.png);
      background-size: contain;
      z-index: 1;
  }
  
  .eolcontainer_block .Objetivos-Media .expmid {
      position: relative;
      top: 46px;
      width: calc(var(--max-width) - 19px);
      box-sizing: border-box;
      border: 1px solid #75D8A2;
      border-top: none;
      overflow: hidden;
      /*background-color: #DBFFB6;*/
      text-align: justify;
      padding: 20px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
  }
  
  /* Video Media */
  
  .eolcontainer_block .Video-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Video-Media .exptop { 
      position: absolute;
      top: 0px;
      left: -3px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 51px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/videomedia-top.png);
      background-size: cover;
      z-index: 100;
  }
  .eolcontainer_block .Video-Media .expmid{
      position: relative;
      top: 49px;
      width: calc(var(--max-width) - 19px);
      box-sizing: border-box;
      border: 1px solid #ED9393;
      border-top: none;
      overflow: hidden;
      /*background-color: #FFE0E0;*/
      text-align: justify;
      padding: 20px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
  }
  
  .eolcontainer_block .Video-Media .expbot{
      position: absolute;
      bottom: -76px;
      width: calc(var(--max-width) - 17px);
      left: -1px;
      height: 58px;
      background-repeat: no-repeat;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/videomedia-botblanco.png);
      background-size: contain;
      cursor: pointer;
  }
  
  .eolcontainer_block .Video-Media .expbot.toggle.cerrado{
      top: 48px;
      left: -1px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/videomedia-bot-sinflecha.png)!important;
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 80;
  }
  
  /* Pedagogica Media */
  
  .eolcontainer_block .Pedagogica-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Pedagogica-Media .exptop { 
      position: absolute;
      top: 0px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 50px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/pedmedia-top.png);
      background-size: cover;
      z-index:100;
  }
  .eolcontainer_block .Pedagogica-Media .expmid{
      position: relative;
      top: 10px;
      height: 100%;
      width: calc(var(--max-width) - 14px);
      box-sizing: border-box;
      border: 1px solid #0DB7AD;
      overflow: hidden;
      /*background-color: #EFFFF9;*/
      text-align: justify;
      padding: 20px;
      padding-top: 58px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
      border-radius: 25px;
      z-index: 90;
  }
  
  /* Disciplinar Media */
  
  .eolcontainer_block .Disciplinar-Media{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Disciplinar-Media .exptop {
      position: absolute;
      top: 0px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 52px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/dismedia-top.png);
      background-size: contain;
      z-index: 1;
  }
  
  .eolcontainer_block .Disciplinar-Media .expmid{
      position: relative;
      top: 49px;
      width: calc(var(--max-width) - 14px);
      box-sizing: border-box;
      border: 1px solid #f4b181;
      border-top: none;
      overflow: hidden;
      text-align: justify;
      padding: 20px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
  }
  
  /* Reflexionemos */
  
  .eolcontainer_block .Reflexionemos{
      min-height: 1px;
      margin-bottom: 70px;
  }
  
  .eolcontainer_block .Reflexionemos .exptop { 
      position: absolute;
      top: 0px;
      width: var(--max-width);
      background-repeat: no-repeat;
      height: 50px;
      background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/reflexionemos.png);
      background-size: cover;
      z-index:100;
  }
  .eolcontainer_block .Reflexionemos .expmid{
      position: relative;
      top: 10px;
      height: 100%;
      width: calc(var(--max-width) - 14px);
      box-sizing: border-box;
      border: 1px solid #52A998;
      overflow: hidden;
      /*background-color: #BBE8FC;*/
      text-align: justify;
      padding: 20px;
      padding-top: 58px;
      padding-bottom: 30px;
      line-height: 24px;
      border-radius: 0px 0px 20px 20px;
      border-radius: 25px;
      z-index: 90;
  }

  /* DIALOGOS */


.eoldialogs_block .personaje{
    width: 130px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center; 
}

.eoldialogs_block .Izquierda ,
.eoldialogs_block .Derecha{
    position: relative;
    width:800px;
    color:#000;
    min-height: 115px;
    padding:20px 0;
    margin: auto;
    box-sizing: border-box; 
    overflow: hidden;
}

.eoldialogs_block .Izquierda .personaje{
    left: 10px;
    position: absolute;
    top:0;
    z-index:5;
}

.eoldialogs_block .Derecha .personaje{
    right: 10px;
    position: absolute;
    top:0;
    z-index:5;
}

.eoldialogs_block .dialogo p {
    margin-bottom: 0 !important;
}

.eoldialogs_block .Izquierda .dialogo{
    left: 180px; 
    display:table; 
    max-width: 505px;
}

.eoldialogs_block .Derecha .dialogo{
    right: 180px;
    float: right;
    text-align: right; 
    display:table;
    max-width: 505px;
}

.eoldialogs_block .Izquierda .dialogo,
.eoldialogs_block .Derecha .dialogo
{
    position: relative;
    min-width: 200px;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    min-height: 78px;
	display: table-cell; vertical-align: middle;
	 width: -webkit-max-content;
	 width: -moz-max-content;
	 width: max-content; 
}
.eoldialogs_block .Izquierda .cola{
    left: 133px;
    background-image: url(https://static.cmm.uchile.cl/global2/cola_izq.png);
}

.eoldialogs_block .Derecha .cola{
    right: 133px;
    background-image: url(https://static.cmm.uchile.cl/global2/cola_der.png);
}

.eoldialogs_block .Izquierda .cola,
.eoldialogs_block .Derecha .cola{
    position: absolute;
    box-sizing: border-box;
    top:35px;
    width: 47px;
    height: 28px;
    z-index: 4;
}

/* CSS for Media theme */

.eoldialogs_block.Media .Izquierda .cola,
.eoldialogs_block.Media .Derecha .cola{
    display:none;
}

.eoldialogs_block.Media .personaje{
    background-size: 95px;
    top:5px;
}

.eoldialogs_block.Media .Izquierda .dialogo {
    left: 140px;
    max-width: 630px!important;
    width: 630px;
}

.eoldialogs_block.Media .Derecha .dialogo {
    right: 140px;
    max-width: 630px!important;
    width: 630px;
}

/*  CAPSULAS  */ 

.Respuesta .exptop {
    top: 0px;
    width: var(--max-width);
    background-repeat: no-repeat;
    height: 38px;
    background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/respuesta-top.png);
    background-color: #ffffff;
}

.Respuesta .expmid {
    position: relative;
    width: var(--max-width);
    box-sizing: border-box;
    border: 1px solid #7800dc;
    border-top: none;
    overflow: hidden;
    background-color: #ffffff;
    text-align: justify;
    padding: 20px;
    line-height: 24px;
    display: block!important;
}

.Respuesta .expbot {
    display: none;
    position: absolute;
    bottom: -48px;
    width: var(--max-width);
    height: 37px;
    background-repeat: no-repeat;
    background-image: url(https://static.sumaysigue.uchile.cl/cmmeduformacion/produccion/assets/img/respuesta-bot1.png);
    cursor: pointer;
}

.feedback{

    background-color: white;
    border-color: white;
}