﻿.person-chart {background: linear-gradient(to bottom, transparent 0%, transparent 85%, white 85%, #DEDFDF 100%);width: calc(100%/2 - 2rem);justify-content: center;align-items: flex-end;}
.person-chart ul {width: calc(100%/5 - 1rem);text-align: center;}
.person-chart ul li {color: #17274B;font-size: 1.5rem;}
.person-chart ul li:first-of-type {font-weight: bold;}
.person-chart ul li:nth-of-type(2) {color: white;font-size: 1.125rem;width: 3rem;height: 11rem;margin: auto;display: flex;align-items: flex-end;justify-content: center;padding: 0 1rem;box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;}
.person-chart ul:nth-of-type(1) li:nth-of-type(2) {background-color: #17274B;}
.person-chart ul:nth-of-type(2) li:nth-of-type(2) {background-color: #349B9D;height: 6rem;}
.person-chart ul:nth-of-type(3) li:nth-of-type(2) {background-color: #CA5835;height: 5.5rem;}
.person-chart ul:nth-of-type(4) li:nth-of-type(2) {background-color: #17274B;height: 7rem;}
.person-chart ul:nth-of-type(5) li:nth-of-type(2) {background-color: #349B9D;height: 5.75rem;}
.person-chart:nth-of-type(2) ul:nth-of-type(1) li:nth-of-type(2) {background-color: #344978;height: 8rem;}
.person-chart:nth-of-type(2) ul:nth-of-type(2) li:nth-of-type(2) {background-color: #5DC2C8;height: 9.5rem;}
.person-chart:nth-of-type(2) ul:nth-of-type(3) li:nth-of-type(2) {background-color: #F0875E;height: 12.5rem;}
.person-chart:nth-of-type(2) ul:nth-of-type(4) li:nth-of-type(2) {background-color: #344978;height: 13rem;}
.person-chart:nth-of-type(2) ul:nth-of-type(5) li:nth-of-type(2) {background-color: #5DC2C8;height: 14.5rem;}

@media screen and (min-width: 1201px) {
    .strength-cont {width: calc(100%/2 - 1rem) !important;}
    .strength-cont img {width: calc(100%/2 - 2rem);}
    
}

@media screen and (max-width: 1200px) {
    .person-chart ul li {font-size: 1.125rem;}    
    .person-chart ul {width: calc(100%/5);}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
 
}

@media screen and (max-width: 767px) {
    .person-chart {width: 100%;}    
    .strength-cont img:nth-of-type(1) {margin-bottom: 1rem;}
    .person-chart:nth-of-type(2) {margin: 0.5rem auto auto;}
}

