.conversacion {
   text-align: center;
   display: flex;
   margin: 0 auto;
   /*padding-top: 150px;*/
   height: auto;
   overflow: visible;
   width: 100%;
   max-width: 100%;
   flex-wrap: wrap;
   flex-direction: row;
   min-height: 400px;
}

@media screen and (min-width:769px) {
   .conversacion {
       justify-content: center;
       align-content: center;
       align-items: center;
   }
}

.secciones {
   height: auto;
}

#botones {
   /*margin: 0 auto;*/
   position: relative;
   /*left: 121px;
   top: -330px;
   display: table;*/
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   max-width: 400px;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (min-width:769px) {
   #botones {
       flex-direction: column;
       width: 20%;
       position: relative;
   }
}

#botones .rol {
   width: 100%;
   padding: 2px;
}

@media screen and (min-width:769px) {
   #botones .rol {
       width: 100%;
       height: auto;
   }
}

/*@media screen and (min-width:920px) {
   #botones .rol{
       height: 70px;
   }
}*/

#botones .rol button {
   height: 100%;
   border-radius: 10px;
   border: none;
   background-color: #7c7c7c;
   font-size: 18px;
   width: 100%;
   opacity: 1;
   text-shadow: none;
   padding: 10px;
   color: #fff;
}

@media screen and (min-width:769px) {
   #botones .rol button {
       font-size: 1.2em;
   }
}


#botones .rol button.seleccionado {
   box-shadow: 0 0 5px 3px hsla(0, 0%, 0%, 0.2);
   animation: pulse 1s infinite;
}


.tooltip__trigger.inicio {
   box-shadow: 0 0 6px 2px hsla(0, 0%, 0%, 0.1);
   animation: pulse2 .5s infinite;
}

#botones .rol:nth-child(even) button.active {
   background-color: #ffdc5d;
   color: #016d38;
}

#botones .rol:nth-child(odd) button.active {
   background-color: #016d38;
   color: #fff;
}


/*.eva-unit01 .tooltip__shape{
   fill: #e61d3a;
}
.eva-unit02 .tooltip__shape{

   fill: #ad123c;
}
.eva-unit03 .tooltip__shape{

   fill: #2f8282;
}
.eva-unit04 .tooltip__shape{

   fill: #f47920;
}
.eva-unit05 .tooltip__shape{

   fill: #f9a01b;
}
.eva-unit06 .tooltip__shape{

   fill: #e61d3a;
}
.eva-unit07 .tooltip__shape{

   fill: #ad123c;
}*/

.eva-unit-odd .tooltip__shape {

   fill: #016d38;
}

.eva-unit-even .tooltip__shape {

   fill: #ffdc5d;
}

.eva-unit-odd .tooltip__content {

   color: #fff;
}

.eva-unit-even .tooltip__content {

   color: #fff;
}

.boton-recurso2 {
   cursor: pointer;
   width: 148px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

#empleado {
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   background-image: url(../img/0.png);
   width: 100%;
   height: 200px;
}

@media screen and (min-width:768px) {
   #empleado {
       width: 40%;
       height: 400px;
   }
}

@media (max-width:767px) and (min-width:576px) {
   #empleado {
       width: 50%;
       height: 250px;
   }
}



#funciones {
   width: 100%;
}

@media screen and (min-width:768px) {
   #funciones {
       width: 40%;
   }
}

@media (max-width:767px) and (min-width:576px) {
   #funciones {
       width: 50%;
   }
}



.tareas {
   text-align: left;
   position: relative;
   padding: 0 0 10px;
}

/*@media screen and (min-width:769px) {
   .tareas{
       position: relative;
   }
}*/

.tareas span {
   border-radius: 50%;
   height: 1.5em;
   width: 1.5em;
   display: inline-block;
   color: #fff;
   text-align: center;
   font-weight: 600;
   position: absolute;
   left: 10px;
}

.tareas:nth-child(odd) span {
   background: #016d38;
}

.tareas:nth-child(even) span {
   background: #ffdc5d;
}

.tareas p {
   display: inline-block;
   font-size: 18px;
   padding-left: 50px;
   margin-bottom: 0;
}


/***** estilos tooltips ****/

.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: block;
   /*-webkit-flex-flow: row wrap;*/
   justify-content: space-around;
}

.tooltip-recurso2 {
   position: absolute;
   /*top: -121px;
   left: -331px;*/
   opacity: 1;
   font-size: 14px;
   color: #fff;
}

.tooltip__trigger {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   cursor: pointer;
   font-size: 25px;
   position: relative;
   /*margin-left: -20px;*/
   height: 54px;
   width: 56px;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transition: background-image;
}

.tooltip__trigger-text {
   display: block;
   padding: 0.85em;
   pointer-events: none;
}

.tooltip__base1 {
   position: absolute;
   left: 4%;
   margin: 0 auto;
   bottom: -114px;
   margin-left: 0px;
   width: 320px;
   height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   font-size: 12px;
   display: none;
}

@media screen and (min-width:769px) {
   .tooltip__base1 {
       left: 95%;
       top: -15px;
   }
}

.tooltip__base2 {
   position: absolute;
   left: 234%;
   margin: 0 auto;
   top: -140%;
   margin-left: 0px;
   width: 474px;
   height: 397px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   display: none;
}


/* tooltip  */

.tooltip__content {
   color: #fff;
   margin-left: -102px;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   text-align: center;
   width: 45%;
   padding: 0 1em;
   opacity: 0;
   font-size: 14px;
   top: -21px;

   line-height: 1.1;
   font-size: 1.8em;
   font-weight: 600;
}

@media screen and (min-width:769px) {
   .tooltip__content {
       margin-left: auto;
       position: absolute;
       padding: 0;
       font-weight: 600;
       font-size: 1.3em;
       top: auto;
   }
}

.tooltip__shape,
.tooltip__shape2,
.tooltip__deco {
   position: absolute;
   width: 100%;
   height: 200%;
   top: -70px;
   left: -51px;
}

@media screen and (min-width:769px) {

   .tooltip__shape,
   .tooltip__shape2,
   .tooltip__deco {
       position: initial;
       width: auto;
       top: 0;
       left: 0;
   }
}

.tooltip__shape {
   fill: #016d38;
}

.tooltip__shape2 {
   fill: #016d38;
}


/* Smaug */

.tooltip--smaug .tooltip__base {
   bottom: -60px;
   transform-origin: 50% 100%;
}

.tooltip--smaug .tooltip__content {
   padding: 0;
}

.posicion-tooltip {
   position: absolute;
}


/* media queries */

@media screen and (max-width:577px) {
   #recurso2-imagen {
       width: 380px;
       height: 380px;
   }

   #recurso-2 #botones {
       width: 165px;
       left: 88px;
       top: -212px;
   }

   .tooltip__trigger {
       height: 33px;
       width: 22px;
       font-size: 20px;
   }

   .flex-container {
       width: 135px;
       margin: 0px 4px;
   }

   .tooltip__base {
       width: 250px;
       height: 355px;
       left: 70px;
   }

   .tooltip__content {

       line-height: 1.1;
       font-size: 20px;
       font-weight: 600;

   }

   .tooltip--smaug .tooltip__base {
       bottom: -107px;
   }

   #recurso-2 {
       margin-left: -109px;
       width: 526px;
       height: 420px;
   }
}

@media screen and (min-width: 578px) and (max-width: 619px) {
   #recurso2-imagen {
       width: 450px;
       height: 450px;
   }

   #recurso-2 #botones {
       width: 165px;
       left: 91px;
       top: -247px;
   }

   .tooltip__trigger {
       height: 33px;
       width: 26px;
       font-size: 23px;
   }

   .flex-container {
       width: 162px;
       margin: 0px 8px;
   }

   .tooltip__base {
       width: 250px;
       height: 355px;
       left: 96px;
   }

   .tooltip__content {
       line-height: 1.1;
       font-size: 10px;
   }

   .tooltip--smaug .tooltip__base {
       bottom: -107px;
   }

   #recurso-2 {
       margin-left: -65px;
       width: 572px;
       height: 460px;
   }
}

@media screen and (min-width: 620px) and (max-width: 750px) {
   #recurso2-imagen {
       width: 500px;
       height: 500px;
   }

   #recurso-2 #botones {
       width: 100px;
       left: 100px;
   }

   .tooltip__trigger {
       height: 33px;
       width: 29px;
   }

   .flex-container {
       width: 183px;
       margin: 0px 2px;
   }

   .tooltip__base {
       width: 296px;
       height: 355px;
       left: 82px;
   }

   .tooltip__content {
       line-height: 1.1;
       font-size: 20px;
   }

   .tooltip--smaug .tooltip__base {
       bottom: -87px;
   }

   #recurso-2 {
       margin-left: -58px;
       width: 656px;
       height: 610px;
   }
}

@keyframes pulse {
   0% {
       transform: scale(1);
   }

   50% {
       transform: scale(1.02);
   }

   100% {
       transform: scale(1);
   }
}

@keyframes pulse2 {
   0% {
       transform: scale(1);
   }

   50% {
       transform: scale(1.04);
   }

   100% {
       transform: scale(1);
   }
}