

.navigation {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#666;
    background: linear-gradient(45deg, #7cc2d6 0%, #1992cb 56%, #245daa 100%);
    z-index:200 !important;
    clip-path:circle(25px at calc(100% - 45px) 45px);
    transition:all 500ms ease-in-out;
}
.navigation.active {
    clip-path:circle(75%);
}
.navigation .ham-btn {
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    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%;
    max-width: 1000px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}
.navigation .links ul li {
    width: 32%;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 50px;
}
.navigation .links ul li a,
.navigation .links ul li .blank {
    display: block;
    text-decoration: none;
    color: #000;
}
.navigation .links ul li a .ph,
.navigation .links ul li .blank .ph {
    padding: 40px 40px;
}
.navigation .links ul li a:hover {
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    zoom:1;
}









