.thirdsection {
    height: auto;
    width: 100%;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
}

.pieright a {
    animation-name: fade;
    animation-duration: 1.5s;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

@keyframes fade {
    from {opacity: .0}
    to {opacity: 1}
}

.piechart a {
    background-color: #AD310B;
    transition: background-color 200ms linear;
}

@media screen and (max-width:414px) {

.thirdsection {
    padding: 20px 24px 0px 24px;
}

.pie {
    display: flex;
    flex-direction: column;
    padding: 30px 0 50px 0;
    gap: 30px;
}

.pieleft {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;   
}

.piechart {
    width: 100%;
    max-width: 400px;
    max-height: 400px;
    aspect-ratio: 1 / 1;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.piecharttl, .piecharttr, .piechartbr, .piechartbl {
    width: 50%;
    height: 50%;
    position: absolute;
    box-sizing: border-box;
}

.piecharttl {
    top: 0;
    left: 0;
    border-right: white 2px dashed;
    border-bottom: white 2px dashed;
}

.piecharttr {
    top: 0;
    right: 0;
    border-left: white 2px dashed;
    border-bottom: white 2px dashed;
}

.piechartbl {
    bottom: 0;
    left: 0;
    border-right: white 2px dashed;
    border-top: white 2px dashed;
}

.piechartbr {
    bottom: 0;
    right: 0;
    border-left: white 2px dashed;
    border-top: white 2px dashed;
}

.piecharttl img, .piecharttr img, .piechartbl img, .piechartbr img {
    width: 40%;
    position: absolute;
}

.piecharttl img {
    bottom: 30px;
    right: 30px
}

.piecharttr img {
    bottom: 30px;
    left: 30px
}

.piechartbl img {
    top: 30px;
    right: 30px
}

.piechartbr img {
    top: 30px;
    left: 30px
}

.pieright {
    width: 100%;
    display: none;
}

.pierightheader {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    gap: 10px;
}

.pierightheader img {
    height: 50px;
    position: relative;
}

}

@media screen and (min-width:415px) and (max-width:789px) {

.thirdsection {
    padding: 40px 40px 0px 40px;
}

.pie {
    display: flex;
    flex-direction: column;
    padding: 60px 0;
    gap: 40px;
}

.pieleft {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;   
}

.piechart {
    width: 100%;
    max-width: 400px;
    max-height: 400px;
    aspect-ratio: 1 / 1;
    height: 100%;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    position: relative;
    overflow: hidden;
}

.piecharttl, .piecharttr, .piechartbr, .piechartbl {
    width: 50%;
    height: 50%;
    position: absolute;
    box-sizing: border-box;
}

.piecharttl {
    top: 0;
    left: 0;
    border-right: white 2px dashed;
    border-bottom: white 2px dashed;
}

.piecharttr {
    top: 0;
    right: 0;
    border-left: white 2px dashed;
    border-bottom: white 2px dashed;
}

.piechartbl {
    bottom: 0;
    left: 0;
    border-right: white 2px dashed;
    border-top: white 2px dashed;
}

.piechartbr {
    bottom: 0;
    right: 0;
    border-left: white 2px dashed;
    border-top: white 2px dashed;
}

.piecharttl img, .piecharttr img, .piechartbl img, .piechartbr img {
    width: 40%;
    position: absolute;
}

.piecharttl img {
    bottom: 30px;
    right: 30px
}

.piecharttr img {
    bottom: 30px;
    left: 30px
}

.piechartbl img {
    top: 30px;
    right: 30px
}

.piechartbr img {
    top: 30px;
    left: 30px
}

.pieright {
    width: 100%;
    display: none;
}

.pierightheader {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    gap: 10px;
}

.pierightheader img {
    height: 50px;
    position: relative;
}

}

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

.thirdsection {
    padding: 40px 80px 0px 80px;
}

.pie {
    display: flex;
    flex-direction: row;
    padding: 60px 0px;
    gap: 40px;
    width: 100%;
}

.pieleft {
    width: 400px;
    max-width: 40%;
    min-width: 30%;
    display: flex;
    justify-content: center;
    overflow: hidden;   
}

.piechart {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: rgb(0, 0, 0);
}

.piechartcorner {
    background: rgb(0, 0, 0);
    overflow: hidden;
}

.piecharttl, .piecharttr, .piechartbr, .piechartbl {
    width: 50%;
    height: 50%;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;   
}

.piecharttl {
    top: 0;
    left: 0;
    border-right: white 2px dashed;
    border-bottom: white 2px dashed;
}

.piecharttr {
    top: 0;
    right: 0;
    border-left: white 2px dashed;
    border-bottom: white 2px dashed;
}

.piechartbl {
    bottom: 0;
    left: 0;
    border-right: white 2px dashed;
    border-top: white 2px dashed;
}

.piechartbr {
    bottom: 0;
    right: 0;
    border-left: white 2px dashed;
    border-top: white 2px dashed;
}

.piecharttl img, .piecharttr img, .piechartbl img, .piechartbr img {
    width: 35%;
    max-width: 70px;
    position: absolute;
}

.piecharttl img {
    bottom: 20%;
    right: 20%
}

.piecharttr img {
    bottom: 20%;
    left: 20%
}

.piechartbl img {
    top: 20%;
    right: 20%
}

.piechartbr img {
    top: 20%;
    left: 20%
}

.pieright {
    width: auto;
    display: none;
}

.pierightheader {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    gap: 10px;
}

.pierightheader img {
    height: 50px;
    position: relative;
}

}

@media (hover: hover) and (pointer: fine) {

.piechartcorner:hover {
    cursor: pointer;
    background: hsl(0, 0%, 23%)!important;
}

/* .piechartbr:hover, .piechartbl:hover, .piecharttr:hover, .piecharttl:hover {
    cursor: pointer;
    background: rgb(90, 90, 90)
}

.piecharttl:hover {
border-top-left-radius: 100%;
}

.piecharttr:hover {
border-top-right-radius: 100%;
}

.piechartbl:hover {
border-bottom-left-radius: 100%;
}

.piechartbr:hover {
border-bottom-right-radius: 100%;
} */

}