/* diagrams-01 */
.diagrams-01 .image-wrapper {
    content: '';
    position: relative;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px!important;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-color: #eee;
}

.diagrams-01 .image-wrapper::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 15px;
    bottom: 15px;
    right: 15px;
    border-radius: 50%;
    background-color: #fff;
}

.diagrams-01 .image {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(auto,auto,auto,100px);
    background: none!important;
}

.diagrams-01 .image.half {
	clip: rect(auto, auto, auto, auto);
}

.diagrams-01 .image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #87ceeb;
    border-radius: 50%;
    clip: rect(auto,100px,auto,auto);
}

.diagrams-01 .image.half::after { 
	transform: rotate(180deg)!important;
}

.diagrams-01 .image.half::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #87ceeb;
    border-radius: 50%;
    clip: rect(auto,100px,auto,auto);
}

.diagrams-01 .lt-tsr-content {
	position: relative;
}

.diagrams-01 .f-subheader {
	position: absolute;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    color: #87ceeb;
    font-size: 40px;
    font-weight: 700;
}

.diagrams-01 .f-header { 
    padding-top: 20px;
    margin-top: 20px;
	font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    color: #4b6784;
    border-top: 1px solid #ddd;
}

/* end diagrams-01 */