body {
    overflow: hidden;
}
.circle {
    width: 40%;
    height: 100%;
    /* background-color: blueviolet; */
}
.circle-paths {
    width: 700px;
    height: 700px;
}
.circle-path {
    transform-origin: center center;
}
.circle-path-1, .circle-path-2, .circle-path-3, .circle-path-4 {
    cursor: pointer;
    transition: .5s;
    margin: -1px;
}
.cp-1, .cp-2, .cp-3, .cp-4, .cp-11, .cp-12 {
    transition: .5s; 
}
.circle-path-1:hover .cp-12 {
    fill: url(#pattern0);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-1:hover .cp-11 {
    fill: #58CAE5;
    fill-opacity: 0.7;
    transition: .5s;
}
.circle-path-2:hover .cp-22 {
    fill: url(#pattern1);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-2:hover .cp-21 {
    fill: #F66D74;
    fill-opacity: 0.7;
    transition: .5s;
}
.circle-path-3:hover .cp-32 {
    fill: url(#pattern2);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-3:hover .cp-31 {
    fill: #FDA865;
    fill-opacity: 0.7;
    transition: .5s;
}
.circle-path-4:hover .cp-42 {
    fill: url(#pattern3);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-4:hover .cp-41 {
    fill: #63C296;
    fill-opacity: 0.7;
    transition: .5s;
}
.encecl {
    width: 40%;
    color: white;
    /* padding-top: 10%; */
    z-index: 1;
    padding-bottom: 4%;
}
.encecl h3 {
    font-size: 64px;
    padding-top: 20%;
    height: 44%;
}
.main-menu {
    width: 100%;
    height: 20%;
}
.main-menu div {
    width: 25%;
    border-bottom: 2px solid white;
    font-size: 32px;
    color: #FFFFFF;
    font-weight: bold;
}
.nav-unit {
    width: 15%;
    cursor: pointer;
} 
.nav-unit-item {
    font-size: 32px;
    color: #FFFFFF;
    font-weight: bold;
    border-bottom: 3px solid white;
    font-size: 32px;
    transition: .5s;

}
.nav-unit-item.active {
    background-color: transparent !important;
    border: none;
    border-bottom: 3px solid white;
}
.butts a {
    background-color: transparent;
    border: 2px solid white;
    border-radius: 15px;
    color: white;
    width: 40%;
    height: 50px;
    line-height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
}
.contents {
    height: 36%;
}
.circle-path-1.active path.cp-12 {
    fill: url(#pattern0);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-1.active path.cp-11 {
    fill: #58CAE5;
    fill-opacity: 0.7;
    transition: .5s;
    /* mix-blend-mode:soft-light */
}
.circle-path-2.active path.cp-22 {
    fill: url(#pattern1);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-2.active path.cp-21 {
    fill: #F66D74;
    fill-opacity: 0.7;
    transition: .5s;
    /* mix-blend-mode:soft-light */
}
.circle-path-3.active path.cp-32 {
    fill: url(#pattern2);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-3.active path.cp-31 {
    fill: #FDA865;
    fill-opacity: 0.7;
    transition: .5s;
    /* mix-blend-mode:soft-light */
}
.circle-path-4.active path.cp-42 {
    fill: url(#pattern3);
    fill-opacity: 0.7;
    transition: .5s;
    mix-blend-mode:soft-light
}
.circle-path-4.active path.cp-41 {
    fill: #63C296;
    fill-opacity: 0.7;
    transition: .5s;
    /* mix-blend-mode:soft-light */
}
.imageFons.show {
    opacity: 1;
    transition: .5s;
}
.imageFons {
    opacity: 0;
    transition: .5s;
    z-index: 0;
}
.circle-2.first circle {
    stroke: #58CAE5;
    transition: .5s;
}
.circle-2.second circle {
    stroke: #F66D74;
    transition: .5s;
}
.circle-2.third circle {
    stroke: #FDA865;
    transition: .5s;
}
.circle-2.fourth circle {
    stroke: #63C296;
    transition: .5s;
}
.main.first {
    box-shadow: inset 0px -100px 500px -100px #58CAE5;
    transition: .5s;
}
.main.second {
    box-shadow: inset 0px -100px 500px -100px #F66D74;
    transition: .5s;
}
.main.third {
    box-shadow: inset 0px -100px 500px -100px #FDA865;
    transition: .5s;
}
.main.fourth {
    box-shadow: inset 0px -100px 500px -100px #63C296;
    transition: .5s;
}
.nav-unit-item.active.first {
    border-color: #58CAE5;
    transition: .5s;
}
.nav-unit-item.active.second {
    border-color: #F66D74;
    transition: .5s;
}
.nav-unit-item.active.third {
    border-color: #FDA865;
    transition: .5s;
}
.nav-unit-item.active.fourth {
    border-color: #63C296;
    transition: .5s;
}