.navigation {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: linear-gradient(45deg, #7cc2d6 0%, #1992cb 56%, #245daa 100%);
    z-index:200 !important;
    clip-path:circle(20px at calc(100% - 32px) 32px);
    transition:all 500ms ease-in-out;
}
.navigation.active {
    clip-path:circle(75%);
}
.navigation .ham-btn {
    position:absolute;
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    z-index: 100;
}
.navigation .ham-btn span {
    position:absolute;
    left:50%;
    transform:translate(-50%,-50%);
    width:50%;
    height:2px;
    background:#f5f5f5;
    transition:all 200ms ease-in-out;
}
.navigation .ham-btn span:nth-child(1) {
    top:30%;
}
.navigation .ham-btn span:nth-child(2) {
    top:50%;
}
.navigation .ham-btn span:nth-child(3) {
    top:70%;
}
.navigation.active .ham-btn span:nth-child(1) {
    top:50%;
    transform:translate(-50%,-50%) rotate(45deg);
}
.navigation.active .ham-btn span:nth-child(2) {
    display:none;
}
.navigation.active .ham-btn span:nth-child(3) {
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
}
.navigation .links {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 100%;
}
.navigation .links ul {
    width: 100%;
    margin: 0 auto;
    padding: 0 100px;
}
.navigation .links ul li {
    margin-bottom: 10px;
}
.navigation .links ul li a,
.navigation .links ul li .blank {
    background: #fff;
    border-radius: 10px;
    display: block;
    padding: 20px 20px;
    text-decoration: none;
}
.navigation .links ul li a .ph,
.navigation .links ul li .blank .ph {
    margin: 0 auto;
    padding: 10px 15%;
}
.navigation .links ul li a .text h4,
.navigation .links ul li .blank .text h4 {
    font-size: 120%;
}