.infoBox#calcRiskCovid19 {display: flex;flex-flow: column;align-items: center;margin-bottom: 2rem;}
.infoBox#calcRiskCovid19 .title {font-size:2.4rem;text-align: center;line-height:3.2rem;display:block;}

.settingBox {width:80%;display:inline-block;background:transparent;font-size:0;align-self:flex-end;}
.infoBox .svgBox {position:relative;top:0;left:0;overflow:hidden;clip-path:polygon(50% 0%, 117% 60%, 50% 121%, -18% 60%);-webkit-clip-path:polygon(50% 0%, 117% 60%, 50% 121%, -18% 60%);}
.infoBox .svgBox svg {height:55rem;}

.settingBox span {font-size:1.4rem;line-height:1;}

/*settingBox setting*/
.settingBox .select_setting:before {content: "";width: 100%;display: block;height: 0.4rem;background: #ef8337;}
.settingBox p {background:#ef8337;text-transform:uppercase;color:#fff;font-size:1.8rem;font-weight: 600;position:relative;}
.settingBox>p{padding-left: 10rem;top:0.4rem;font-size: 2rem;line-height: 4rem;margin: 0;}
.settingBox>p:before{width: 4rem;display: block;content: "";height: 100%;background: #ffffff;position: absolute;left:50%;top: 0;transform: skew(45deg);margin-left: -2rem;}
.settingBox>p:after {width:50%;display: block;content: "";height: 100%;background: #fff;position: absolute;right: 0;top: 0;}
.settingBox .select_setting , .settingBox .type_setting {position: relative;display: inline-block;text-align:center;width: 100%;padding-left:6rem;}
.settingBox ul {display:flex;width:100%;}
.settingBox .select_setting div ,.settingBox .type_setting div{align-items:center;justify-content: center;text-align: center;width: 20%;padding: 1rem 0.5rem;height:100%;}
.settingBox ul img {display:inline-block;width:6rem;height:6rem;background: #e0e0e0;border-radius:50%;border:0.2rem solid #e0e0e0;}
.settingBox .select_setting div span{position:relative;text-align:center;color: #fff;}
.settingBox .select_setting div span:after {content: "";width: 100%;background:#ddd;position:absolute;height:0.2rem;display:none;margin:0 auto;left:0;}
.settingBox .select_setting div.active span:after{display:block;}
div[class*='_setting'] div {cursor:pointer;}

/*settingBox type*/
.select_setting img {display: none;}
.settingBox .select_setting div {background: #2e2d2d;color: #fff;display: inline-block;transition:all 0.2s;}
.settingBox .select_setting div:hover {opacity: 0.8;}
.settingBox .type_setting div{width: 100%;padding: 0;}
/*.settingBox .type_setting:before {content:"";display:block;position:relative;width:0;height:0;border-style:solid;border-width:5rem 0 5rem 3rem;border-color:transparent transparent transparent #fff;}*/
.settingBox .type_setting {background:#f4f4f4;}
.settingBox .type_setting li{display:flex;flex-flow:row;align-items:center;justify-content:center;height:10rem;opacity: 0.6;}
.settingBox .type_setting p {background: transparent;color: #4b4b4b;text-transform: none;order: 2;font-size: 1.6rem;margin-left: 1rem;padding: 0;}
.settingBox .type_setting li span {display:block;font-size:1.4rem;font-weight: 400;margin-left: 1rem;}
.settingBox ._personas li {width:33.333%;}
.settingBox ._mascarillas li {width:50%;}
.settingBox ._ventanas li {width:33.333%;}
.settingBox ._tiempo_hablando li {width:50%;}
.settingBox ._volumen li {width:50%;}

/* active */
.settingBox .select_setting div.active img, .settingBox .type_setting li.active img{border: 0.2rem solid #4b4b4b;}
.settingBox li.active {font-weight: 600;background:#cacaca;opacity: 1;}

/*result*/
.por_riesgo {position:relative;display: inline-block;background: #ef8337;color: #fff;width: 100%;}
.por_riesgo ul{display: flex;align-items: center;}
.por_riesgo p strong,
.por_riesgo span strong  {font-size: 9rem;display:block;line-height: 9rem;color:#fff;}
.por_riesgo span.num_person {text-align:center;border-radius:100%;background:#C1272D;width: 14rem;height: 14rem;vertical-align:middle;position:absolute;left: -20rem;bottom: 18rem;z-index:1;font-weight: 600;padding: 0 1rem 0 1rem;color:#fff;}
.por_riesgo .num_person strong {font-size: 8rem;font-weight: 600;}
.por_riesgo p {font-size: 1.6rem;text-transform:none;line-height: 1.8rem;text-align:center;border-radius:100%;background:#C1272D;width: 24rem;height: 24rem;vertical-align:middle;position:absolute;left:-14rem;bottom:0;font-weight: 400;padding: 5rem 2rem 0rem 2rem;margin:0;}
.por_riesgo ul li {width:auto;font-size: 1.4rem;line-height: 3.2rem;font-weight: 600;color:#fff;}
.por_riesgo p + ul {width: calc(100% - 6rem);position: relative;left:6rem;display:flex;flex-flow: row;justify-content:space-around;}
.por_riesgo span {font-weight: 300;color:#fff;}
.slideHor {font-size: 1.6rem;}

/*status path*/
path[id*='status']{fill:white;}
path[id*='status'].infected {fill:#C1272D;}

.virus{display: block;position: absolute;height: 2px;width: 2px;background-color: #fff;top:0;left:0;}

/* habitaciones */
.svgBox .layer_virus.room_20 {clip-path:polygon(50% 2%, 98% 46%, 98% 69%, 77% 86%, 69% 85%, 38% 46%, 26% 25%);-webkit-clip-path:polygon(50% 2%, 98% 46%, 98% 69%, 77% 86%, 69% 85%, 38% 46%, 26% 25%);width: 100%;}
.svgBox .layer_virus.room_40 {clip-path:polygon(50% 2%, 98% 46%, 98% 76%, 74% 98%,25% 98%, 2% 76% , 2% 46%);-webkit-clip-path:polygon(50% 2%, 98% 46%, 98% 76%, 74% 98%,25% 98%, 2% 76% , 2% 46%);width: 100%;}

.layer_virus{/* transform: rotateX(55deg) rotateY(0deg) rotate(-45deg); */position: absolute;top: 0;left: 0;display: block;position: absolute;height: 55rem;width: 100%;/* background-color: #ff00001c; */overflow:hidden;}

@media (max-width:1400px){
    .por_riesgo ul li{font-size:1.4rem;}
    .settingBox .select_setting, .settingBox .type_setting{padding-left:4rem;}
    .por_riesgo p strong, .por_riesgo span strong {font-size:8rem;}
    .por_riesgo p + ul {width:calc(100% - 4rem);left:4rem;}
    .por_riesgo p{width:22rem;height:22rem;}
}
@media (max-width:1200px){
    .por_riesgo ul li{font-size:1.3rem;}
}
@media (max-width:1100px){
    .por_riesgo p {width: 20rem;height: 20rem;left:-14rem;bottom:0;padding: 3rem 2rem 0rem 2rem;}
    .por_riesgo span.num_person{left:-18rem;bottom:16rem;}
    .settingBox>p {padding-left: 4rem;}
    .settingBox .select_setting, .settingBox .type_setting{padding-left: 3rem;}
    .por_riesgo ul li,.por_riesgo ul span{font-size:1.2rem;font-weight: 400;}
    .por_riesgo p strong {font-size:7rem;}
    .settingBox .select_setting div{padding:1rem 0rem;}
    .por_riesgo p + ul {width:calc(100% - 2rem);left:2rem;}
}
